JantonioFC/skillsbank

Next.js 16+ et Turbopack — bundling incrémental, cache FS, vitesse de développement, et quand utiliser Turbopack vs webpack.

Qu'est-ce que skillsbank ?

Cette compétence fournit des conseils essentiels sur l'utilisation de Turbopack, le bundler incrémental par défaut dans Next.js 16+ pour le développement local. Conçu pour les développeurs travaillant avec Next.js, il explique les cas d'utilisation de Turbopack (développement quotidien, démarrage à froid rapide, HMR) par rapport à webpack (scénarios hérités, plugins webpack-only ou bugs). Il détaille le fonctionnement interne : bundling incrémental, mise en cache sur le système de fichiers pour des redémarrages jusqu'à 14× plus rapides, et l'Analyseur de Bundle expérimental (Next.js 16.1+). La compétence inclut des exemples de commandes CLI, des meilleures pratiques (rester sur une version récente de Next.js 16.x, ne pas vider le cache inutilement) et des conseils pour le débogage des performances de développement et de production. Elle est compatible avec Claude Code, Cursor, et d'autres agents IA utilisant des fichiers SKILL.md.

Compatible avec~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/JantonioFC/skillsbank/tree/HEAD/skills/ck

Documentation

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 utiliser

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

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

Comment ça marche

Turbopack : Bundler incrémental pour le développement Next.js. Utilise la mise en cache du système de fichiers pour que les redémarrages soient beaucoup plus rapides (par exemple, 5 à 14 fois plus rapides sur les grands projets).
Par défaut en développement : Depuis Next.js 16, next dev s'exécute avec Turbopack sauf désactivation.
Mise en cache du système de fichiers : Les redémarrages réutilisent les travaux précédents ; 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 via la configuration ou un indicateur 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 fractionnement de code et réduire les dépendances volumineuses. Préférez l'App Router et les composants serveur lorsque c'est possible.

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 vidé 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.