title: NextJS dynamic routing in Amazon CloudFront
body: <p>I have an application that uses NextJS as a wrapper, and I make use of <a href="https://nextjs.org/docs/routing/dynamic-routes" rel="nofollow noreferrer">NextJS's dynamic routing feature</a>. I had a problem when deploying it to CloudFront due to <code>dns.com/path/page</code> not being rendered, instead CloudFront expected it to be <code>dns.com/path/page.html</code>. I worked it around by applying this <a href="https://github.com/CloudUnder/lambda-edge-nice-urls/blob/master/lambdaRewrite.js" rel="nofollow noreferrer">lambda-edge-nice-url</a> solution. It works properly now. However, there's still one issue left: NextJS's dynamic routes. <code>dsn.com/path/subpath/123</code> should work, since 123 is a dynamic parameter. However, that does no work. In only returns the page when I access <code>dns.com/path/subpath/[id]</code>, which of course is not correct, since [id] is not a parameter I want to load.</p>
  <p>The strangest thing is: if I try to access the URL as I stated above directly, it fails. However, inside the application I have buttons and links that redirect the user, and that works properly.</p>
  <p>Navigating from inside the application (button with <code>router.push</code> inside its callback):
  <a href="https://i.stack.imgur.com/TsYLO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TsYLO.png" alt="enter image description here" /></a></p>
  <p>Trying to access the url directly:
  <a href="https://i.stack.imgur.com/qsxAd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qsxAd.png" alt="enter image description here" /></a></p>
  <p>Can anyone help me to properly route the requests?</p>