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 inicio del servidor de desarrollo y las actualizaciones en caliente.

Cuándo Usar

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

Úsalo cuando: estés desarrollando o depurando aplicaciones Next.js 16+, diagnosticando un inicio de desarrollo lento o HMR, u optimizando paquetes de producción.

Cómo Funciona

• Turbopack: Empaquetador incremental para el desarrollo de Next.js. Utiliza caché de sistema de archivos para que los reinicios sean mucho más rápidos (por ejemplo, de 5 a 14 veces en proyectos grandes).
• Por defecto en desarrollo: Desde Next.js 16, next dev se ejecuta con Turbopack a menos que se deshabilite.
• Caché de 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.
• Analyzer de Paquetes (Next.js 16.1+): Analyzer de paquetes experimental para inspeccionar el resultado y encontrar dependencias pesadas; actívalo mediante configuración o bandera 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 Analyzer de paquetes (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 Middleware

Next.js 16 introdujo proxy.ts como el nombre del archivo 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 middleware mal nombrado o faltante en proyectos Next.js 16. El archivo es correcto e intencional. Sugerir un cambio de nombre a middleware.ts romperá la ejecución del middleware.

Referencia: Documentación de proxy de Next.js

Buenas 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 de que la caché no se esté limpiando innecesariamente.
• Para problemas de tamaño de paquetes en producción, utiliza las herramientas oficiales de análisis de paquetes de Next.js para tu versión.