title: Next.js: How to make links work with exported sites when hosted on AWS Cloudfront?
body: <p>I'm trying to get a prototype Next.js project up by doing a <a href="https://nextjs.org/docs/advanced-features/static-html-export" rel="nofollow noreferrer">Static html export</a> (i.e. <code>next export</code>) and then copying the generated output to AWS S3 and serving it via Cloudfront.</p>
  <p>I've got the following two pages in the <code>/pages</code> directory:</p>
  <ul>
  <li><code>index.tsx</code></li>
  <li><code>Pricing.tsx</code></li>
  </ul>
  <p>Then, following along from the <a href="https://nextjs.org/docs/routing/introduction" rel="nofollow noreferrer">routing doco</a> I added a <code>Link</code> to the pricing page from the index page, like so:</p>
  <pre><code>&lt;Link href=&quot;/Pricing&quot;&gt;
    &lt;a&gt;Pricing&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>This results in a link that looks like <code>example.com/Pricing</code> (when you hover over it and when you click the link, the page does change to the pricing page and the browser shows <code>example.com/Pricing</code> in the URL bar).</p>
  <p>The problem is, that link is not real - it cannot be bookmarked or navigated to directly via the url bar.</p>
  <p>The problem seems to be that when I do a <code>next export</code>, Next.js generates a <code>.html</code> file for each page, but the router doesn't use those <code>.html</code> suffixes.</p>
  <p>So when using the site, if the user tries to bookmark <code>example.com/Pricing</code>; loading that bookmark later will fail because Cloudfront will return a 404 (because CF only knows about the <code>.html</code> file).</p>
  <p>I then tried changing my <code>Link</code> to look like:</p>
  <pre><code>&lt;Link href=&quot;/Pricing.html&quot;&gt;
    &lt;a&gt;Pricing&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>That causes the router to use <code>example.com/Pricing.html</code> and that works fine with Cloudfront - but it actually causes a 404 during local development (i.e. using <code>next dev</code>)!</p>
  <p>Other workarounds I could try are renaming all the <code>.html</code> files and removing the extension before I upload them to S3 (and make sure they get a <code>content-type: text/html</code> header) - or introducing a Cloudfront lambda that does the renaming on the fly when <code>.html</code> resources are requested.  I don't really want to do the lambda thing, but the renaming before uploading shouldn't be too difficult.</p>
  <p>But it feels like I'm really working uphill here. Am I doing something wrong at a basic level?  How is Next.js linking supposed to work with a static html export?</p>
  <p>Next.js version: <code>9.5.3-canary.23</code></p>