Nextjs <Link> prefetch returns 404

Question

I've built a Next.js app that uses dynamic routing and I'm noticing some strange behavior with the <Link> prefetches.

Occasionally (usually after rebuilding but not always) my app starts returning 404s for all prefetches on a given page. If I follow a link, the next page loads but again, all the prefetches on that page start to 404. This problem will go away after refreshing the page several times but this is not always consistent.

The breaks seem to happen exclusively on my dynamic routes, using getStaticProps and content revalidation every second. Below is an example of how I've structured my Link, note tripname would be a dynamic value.

<Link href={`/trip/${tripname)}`}>
    <a>
        <Card className={classes.tripCardRoot} />
    </a>
</Link>

This is what happens when the page loads.

Edit:

I spent the day digging into this and have some additional details to better describe what I'm experiencing. This error is definitely related to when I build my app and is only occurring on pages that are being generated after the build process via the fallback:true property in my getStaticPaths() function.

Pages that are explicitly built (e.g. in the paths array) do not seem to exhibit this problem. I'm not sure if this makes sense but it seems as though the first few loads of a given page revert back to a version from the previous build rather than a fallback page. It's only after reloading a page a few times that the fallback functionality actually kicks in and next builds that page as part of the current build. From that point on everything seems to work as expected until the next build where the whole ordeal starts fresh.

Also included a screenshot of the console log indicating that there's an issue in the /_next/data/... directory. Though I'm not sure what this error is actually referring to.

Answer 1

I had the exact same problem... After 2 days trial/error I finally found a solution. But it's not the best solution IMO.

I updated all my <Link /> components from next/link and disabled the prefetch option. After this change I don't see any 404 errors in my dev-tools network-tab anymore. All GET-requests for the pre-generated JSON data will only take place on hover now, and magically they now don't result in a 404...

I know it is not the best solution, but at least the problem is gone... Hopefully somebody will reply with a better solution!