nextjs-turbopack

Next.js et Turbopack

Next.js 16+ utilise Turbopack par défaut pour le développement local : un bundler incrémental écrit en Rust qui accélère considérablement le démarrage du développement et les mises à jour à chaud (HMR).

Quand utiliser

• Turbopack (par défaut en dev) : À utiliser pour le développement quotidien. Démarrage à froid et HMR plus rapides, en particulier dans les grandes applications.
• Webpack (dev hérité) : À utiliser uniquement si vous rencontrez un bug de Turbopack ou si vous dépendez d'un plugin webpack en dev. Désactivez avec --webpack (ou --no-turbopack selon votre version de Next.js ; consultez la documentation pour votre version).
• Production : Le comportement de la build de production (next build) peut utiliser Turbopack ou webpack selon la version de Next.js ; consultez la documentation officielle de Next.js pour votre version.

À utiliser lors du développement ou du débogage d'applications Next.js 16+, du diagnostic de démarrages lents ou de HMR, ou de l'optimisation des bundles de production.

Comment ça fonctionne

• Turbopack : Bundler incrémental pour le développement Next.js. Utilise la mise en cache du système de fichiers (FS) pour que les redémarrages soient beaucoup plus rapides (par exemple 5 à 14 fois sur les grands projets).
• Par défaut en dev : Depuis Next.js 16, next dev s'exécute avec Turbopack sauf s'il est désactivé.
• Mise en cache du FS : Les redémarrages réutilisent le travail précédent ; le cache se trouve généralement sous .next ; aucune configuration supplémentaire n'est nécessaire pour une utilisation de base.
• Analyseur de Bundle (Next.js 16.1+) : Analyseur de Bundle expérimental pour inspecter la sortie et trouver les dépendances lourdes ; activez-le via la configuration ou un flag expérimental (consultez la documentation Next.js pour votre version).

Exemples

Commandes

next dev
next build
next start

Utilisation

Exécutez next dev pour le développement local avec Turbopack. Utilisez l'Analyseur de Bundle (voir la documentation Next.js) pour optimiser le code splitting et réduire les dépendances volumineuses. Préférez l'App Router et les composants serveur lorsque c'est possible.

Nommage des fichiers Middleware

Next.js 16 a introduit proxy.ts comme nom de fichier middleware, remplaçant l'ancienne convention middleware.ts :

• Next.js 16+ : utilisez proxy.ts à la racine du projet
• Avant Next.js 16 : utilisez middleware.ts à la racine du projet

Le changement de nom est lié à la version de Next.js, pas au bundler utilisé (Turbopack ou webpack). Vérifiez toujours la documentation officielle pour la version que vous utilisez.

Ne signalez pas proxy.ts comme un fichier middleware mal nommé ou manquant dans les projets Next.js 16. Le fichier est correct et intentionnel. Suggérer un renommage en middleware.ts cassera l'exécution du middleware.

Référence : Documentation Next.js proxy

Bonnes pratiques

• Restez sur une version récente de Next.js 16.x pour un comportement stable de Turbopack et de la mise en cache.
• Si le développement est lent, assurez-vous d'être sur Turbopack (par défaut) et que le cache n'est pas effacé inutilement.
• Pour les problèmes de taille de bundle en production, utilisez l'outillage officiel d'analyse de bundle Next.js pour votre version.