junktionssidem/darkside-toolkit

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 et HMR plus rapides, en particulier 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-only en développement. Désactivez-le avec --webpack (ou --no-turbopack selon votre version de Next.js ; vérifiez la documentation pour votre version).
• Production : Le comportement de build de production (next build) peut utiliser Turbopack ou webpack selon la version de Next.js ; vérifiez 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 d'un démarrage de dev lent 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, 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 si 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 flag expérimental (voir 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 la division du code et réduire les dépendances volumineuses. Privilégiez le routeur d'application et les composants serveur lorsque c'est possible.

Conventions de nommage des fichiers Middleware

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

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

Le changement de nom est lié à la version de Next.js, et non 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 proxy Next.js

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.