Next.js y Turbopack
Next.js 16+ usa Turbopack de forma predeterminada para el desarrollo local: un bundler incremental escrito en Rust que acelera significativamente el inicio del dev y las actualizaciones en caliente.
Cuándo Usar
- Turbopack (dev predeterminado): Úsalo para el desarrollo diario. Arranque en frío y HMR más rápidos, especialmente en aplicaciones grandes.
- Webpack (dev heredado): Úsalo solo si encuentras un error en Turbopack o dependes de un plugin exclusivo de webpack en dev. Desactívalo con
--webpack(o--no-turbopacksegún tu versión de Next.js; consulta la documentación de tu versión). - Producción: El comportamiento de 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: desarrolles o depures aplicaciones Next.js 16+, diagnostiques un inicio lento del dev o HMR, u optimices los bundles de producción.
Cómo Funciona
- Turbopack: Bundler incremental para el desarrollo de Next.js. Usa caché en sistema de archivos para que los reinicios sean mucho más rápidos (por ejemplo, 5–14x en proyectos grandes).
- Predeterminado en dev: Desde Next.js 16,
next devse ejecuta con Turbopack a menos que se deshabilite. - Caché en sistema de archivos: Los reinicios reutilizan el trabajo anterior; la caché está típicamente en
.next; no se necesita configuración adicional para uso básico. - Bundle Analyzer (Next.js 16.1+): Bundle Analyzer experimental para inspeccionar la salida y encontrar dependencias pesadas; habilítalo mediante configuración o flag 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 desarrollo local con Turbopack. Usa el Bundle Analyzer (consulta la documentación de Next.js) para optimizar la división de código y recortar dependencias grandes. Prefiere App Router y componentes de servidor cuando sea posible.
Nombre del Archivo de Middleware
Next.js 16 introdujo proxy.ts como el nombre de archivo del middleware, reemplazando la convención anterior middleware.ts:
- Next.js 16+: usa
proxy.tsen la raíz del proyecto - Anterior a Next.js 16: usa
middleware.tsen la raíz del proyecto
El cambio de nombre está vinculado a la versión de Next.js, no a qué bundler (Turbopack o webpack) esté 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
Mejores Prácticas
- Mantente en una versión reciente de Next.js 16.x para un comportamiento estable de Turbopack y caché.
- Si el desarrollo es lento, asegúrate de estar usando Turbopack (predeterminado) y de que la caché no se esté limpiando innecesariamente.
- Para problemas de tamaño de bundle en producción, usa las herramientas oficiales de análisis de bundles de Next.js para tu versión.