title: Vercel/Next.js (seeminlgy) randomly returns 404s with {"notFound": True}
body: <h1>Intro</h1>
  <p>Apologies for not being able to provide a reproducible example. Our team is not able to reproduce the bug reliably. We have been investigating the bug for almost a week now, but can't seem to make any headway. We just rolled out our <code>next.js</code> based headless Shopify store (i.e. use next.js for the frontend and Shopify for everything starting from the checkout).</p>
  <p>This bug is the strangest thing I have seen with <code>next.js</code> so far and any pointers towards solving the problem are more than appreciated.</p>
  <h3>Note:</h3>
  <p>You can navigate to <a href="http://www.everdrop.ch/it" rel="noreferrer">www.everdrop.ch/it</a> and open console to see some some broken links. However, since this is production, we obviously try to fix them as soon as possible.</p>
  <h1>Problem:</h1>
  <p>Almost every time we deploy a new version we would get to see some seemingly random 404s in the console, for when next is trying to <strong>prefetch Links</strong>.</p>
  <img src="https://i.stack.imgur.com/22Zvn.png" width="600"/>
  <p>The 404's are always of the form <code>https://domain/_next/data/&lt;DEPLOYMENT&gt;/&lt;PATH&gt;/slug.json</code> where sometimes <code>PATH</code> is e.g. <code>category-pages</code> and sometimes it's empty.</p>
  <h3>Observation 1</h3>
  <p>When clicking one of the broken links in console (the <code>.json</code>, I would get a <code>404</code>:
  <img src="https://i.stack.imgur.com/GewHN.png" width="600"/></p>
  <p>Navigating to the broken pages on client side will also give a 404
  <img src="https://i.stack.imgur.com/6Z6n2.png" width="600"/></p>
  <p>However, when <code>curl -I -L</code> I would get a <code>200</code>
  <img src="https://i.stack.imgur.com/sl5zo.png" width="600"/></p>
  <h3>Observation 2</h3>
  <p>When checking the Output data in Vercel
  <img src="https://i.stack.imgur.com/plebT.png" width="600"/>
  <br>everything works like a charm</p>
  <img src="https://i.stack.imgur.com/CxFoi.png" width="600"/>
  <p>Note that the URL is different though. It is the same deployment but at a different URL.</p>
  <img src="https://i.stack.imgur.com/gVgC7.png" width="600"/>
  <h3>Observation 3</h3>
  <p>The affected Links are seemingly random. However, some seem to be more likely to be affected than others.</p>
  <h3>Observation 4</h3>
  <p>Navigating to the page and then refreshing or directly accesing the page does produce the properly rendered page. Suprisingly enough this also results (for most pages that is) in a disapearance of the initital error.</p>
  <h3>Observation 5</h3>
  <p>Rerunning the deployment on vercel oftentimes fixes the problem and many of the broken links will then randomly work. Sometimes this leads to other broken links though.</p>
  <h1>Background &amp; Stack</h1>
  <p>We use <strong>Storyblok</strong> and <strong>Shopify</strong> as data providers to query during build time. Shopify for product data and Storyblok for page and content data. All affected pages so far have been pages where we pull data from Storyblok during build time (which are all pages other than search and product pages).</p>
  <p>We use <code>next i18next</code> for multi-language localisation. We use <code>ENV</code> variables to control where data is coming from to build our different stores.</p>