DEV Community

Cover image for A 500 on every page: two dev servers, one cache folder
Amine Affif
Amine Affif

Posted on

A 500 on every page: two dev servers, one cache folder

#nextjs #turbopack #debugging #webdev

My Next.js dev server suddenly returned a 500 on every page, with this error:

Module not found: Can't resolve
'@vercel/turbopack-next/internal/font/google/font'
Enter fullscreen mode Exit fullscreen mode

It was about a Google font. My first thought was the network. I checked that the font servers answered. They did.

What had changed: I'd run next build while next dev was running. Both write to the same folder, .next. After alternating for a while, it held 281 MB of mixed artifacts, and Turbopack had lost its font import table in there.

Starting on a fresh folder fixed everything. But purging every time isn't a solution. Better to prevent the collision: one folder per use.

In next.config.mjs:

const nextConfig = {
  distDir: process.env.NEXT_DIST_DIR || ".next",
};
Enter fullscreen mode Exit fullscreen mode

In package.json:

"dev": "NEXT_DIST_DIR=.next-dev next dev --turbopack"
Enter fullscreen mode Exit fullscreen mode

The build keeps .next, and a verification build can use a third folder: NEXT_DIST_DIR=.next-verify next build. Remember to add them to .gitignore.

Since then, the dev server and the build no longer step on each other.

Amine Affif, full-stack developer in Paris. amineaffif.com

Top comments (0)