nextjs-turbopack

Next.js y Turbopack

Next.js 16+ usa Turbopack por defecto para el desarrollo local: un empaquetador incremental escrito en Rust que acelera significativamente el arranque del desarrollo y las actualizaciones en caliente.

Cuándo usar

• Turbopack (desarrollo por defecto): Úsalo para el desarrollo diario. Arranque en frío y HMR más rápidos, especialmente en aplicaciones grandes.
• Webpack (desarrollo heredado): Úsalo solo si encuentras un error en Turbopack o dependes de un complemento exclusivo de webpack en modo desarrollo. Desactívalo con --webpack (o --no-turbopack según la versión de Next.js; consulta la documentación de tu versión).
• Producción: El comportamiento de la construcción para producción (next build) puede usar Turbopack o webpack según la versión de Next.js; consulta la documentación oficial de tu versión.

Úsalo cuando: estés desarrollando o depurando aplicaciones Next.js 16+, diagnostiques un arranque lento del desarrollo o un HMR lento, u optimices los bundles de producción.

Cómo funciona

• Turbopack: Empaquetador incremental para el desarrollo con Next.js. Utiliza caché del sistema de archivos, por lo que los reinicios son mucho más rápidos (p. ej., de 5 a 14 veces en proyectos grandes).
• Por defecto en desarrollo: A partir de Next.js 16, next dev se ejecuta con Turbopack a menos que se desactive.
• Caché del sistema de archivos: Los reinicios reutilizan el trabajo anterior; la caché suele estar en .next; no se necesita configuración adicional para el uso básico.
• Bundle Analyzer (Next.js 16.1+): Bundle Analyzer experimental para inspeccionar la salida y encontrar dependencias pesadas; actívalo mediante configuración o indicador experimental (consulta la documentación de Next.js para tu versión).

Ejemplos

Comandos

next dev
next build
next start

Uso

Ejecuta next dev para el desarrollo local con Turbopack. Usa el Bundle Analyzer (consulta la documentación de Next.js) para optimizar la división de código y reducir dependencias grandes. Prefiere App Router y componentes de servidor cuando sea posible.

Nomenclatura del archivo de middleware

Next.js 16 introdujo proxy.ts como nombre del archivo de middleware, reemplazando la convención anterior middleware.ts:

• Next.js 16+: usa proxy.ts en la raíz del proyecto
• Anterior a Next.js 16: usa middleware.ts en la raíz del proyecto

El cambio de nombre está vinculado a la versión de Next.js, no al empaquetador (Turbopack o webpack) en uso. Siempre consulta la documentación oficial para la versión que estés revisando.

No marques proxy.ts como un archivo de middleware mal nombrado o faltante en proyectos Next.js 16. El archivo es correcto e intencional. Sugerir renombrarlo a middleware.ts romperá la ejecución del middleware.

Referencia: Documentación de proxy de Next.js

Mejores prácticas

• Mantente en una versión reciente de Next.js 16.x para un comportamiento estable de Turbopack y la caché.
• Si el desarrollo es lento, asegúrate de estar en Turbopack (por defecto) y que la caché no se está limpiando innecesariamente.
• Para problemas de tamaño del bundle en producción, usa las herramientas oficiales de análisis de bundles de Next.js para tu versión.