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.

Quand l'utiliser

• Turbopack (dev par défaut) : Utilisez-le pour le développement quotidien. Démarrage à froid plus rapide et HMR améliorée, surtout dans les grandes applications.
• Webpack (dev legacy) : Utilisez-le uniquement si vous rencontrez un bug de Turbopack ou si vous dépendez d'un plugin webpack uniquement en développement. Désactivez-le avec --webpack (ou --no-turbopack selon votre version de Next.js ; consultez la documentation de 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 votre version.

À utiliser pour : développer ou déboguer des applications Next.js 16+, diagnostiquer un démarrage lent ou une HMR lente, ou optimiser les 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, ce qui rend les redémarrages beaucoup plus rapides (par exemple, 5 à 14 fois sur les grands projets).
• Par défaut en développement : Depuis Next.js 16, next dev s'exécute avec Turbopack sauf s'il est désactivé.
• Mise en cache du système de fichiers : 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 indicateur expérimental (consultez la documentation de 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. Privilégiez le Routeur d'Application et les composants serveur lorsque c'est possible.

Nommage du fichier 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 examinez.

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 briserait 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 du 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 les outils d'analyse de bundle officiels de Next.js pour votre version.