title: Next.js Link prefetch provoke 404 errors in production
body: <p>I'm developing a blog using Next.JS.
  In this blog, I have a page where I present all of my articles.</p>
  <p>The rendered component looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;div&gt;
      {articles.map((article, index) =&gt; {
          const path = `/magazine/${article.id}/${encodeURIComponent(
              article.formatted_name
          )}`;
  
          return (
              &lt;Link key={article.id} href={path} as={path} prefetch&gt;
                  &lt;a&gt;
                      &lt;CardArticle article={article} index={index} /&gt;
                  &lt;/a&gt;
              &lt;/Link&gt;
          );
      })}
  &lt;/div&gt;
  </code></pre>
  <p>Links are working just fine and in development mode, there are no error at all.
  However, after a build, the Links are still working just fine, but the prefetch from the Links fail when I'm on the page with the presented list of articles:</p>
  <p><a href="https://i.stack.imgur.com/RVGas.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RVGas.png" alt="404 errors during prefetch" /></a></p>
  <p>Note if relevant: the list of articles if fetched using an API call in <code>getServerSideProps</code>.</p>
  <p>Does anyone know why my <code>&lt;Link&gt;</code> fail to prefetch but still work otherwise?</p>