Un 500 sur toutes les pages : deux serveurs de dev, un seul dossier de cache

Mon serveur de dev Next.js a soudain renvoyé un 500 sur toutes les pages, avec cette erreur :

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

Elle parlait d'une police Google. J'ai d'abord pensé au réseau. J'ai vérifié que les serveurs de polices répondaient. Ils répondaient.

Ce qui avait changé : j'avais lancé next build pendant que next dev tournait. Les deux écrivent dans le même dossier, .next. À force d'alterner, il pesait 281 Mo d'artefacts mélangés, et Turbopack y avait perdu sa table d'imports de polices.

Démarrer sur un dossier neuf a tout réparé. Mais purger à chaque fois n'est pas une solution. Mieux vaut empêcher la collision : un dossier par usage.

Dans next.config.mjs :

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

Dans package.json :

"dev": "NEXT_DIST_DIR=.next-dev next dev --turbopack"

Le build garde .next, et un build de vérification peut utiliser un troisième dossier : NEXT_DIST_DIR=.next-verify next build. Pense à les ajouter au .gitignore.

Depuis, le serveur de dev et le build ne se marchent plus dessus.

Amine Affif, développeur full-stack à Paris. amineaffif.com