Cómo optimizar tu aplicación Next.js para producción
Antes de llevar tu aplicación Next.js a producción, hay algunas optimizaciones y patrones que deberías considerar implementar para la mejor experiencia de usuario, rendimiento y seguridad.
Esta página proporciona buenas prácticas que puedes usar como referencia cuando construyas tu aplicación y antes de ir a producción, así como las optimizaciones automáticas de Next.js que deberías conocer.
Optimizaciones automáticas
Estas optimizaciones de Next.js están habilitadas por defecto y no requieren configuración:
- División de código (Code-splitting): Next.js divide automáticamente el código de tu aplicación por páginas. Esto significa que solo se carga el código necesario para la página actual durante la navegación. También puedes considerar carga diferida (lazy loading) de bibliotecas de terceros cuando sea apropiado.
- Precarga (Prefetching): Cuando un enlace a una nueva ruta entra en el viewport del usuario, Next.js precarga la ruta en segundo plano. Esto hace que la navegación a nuevas rutas sea casi instantánea. Puedes optar por no usar precarga cuando sea apropiado.
- Optimización estática automática (Automatic Static Optimization): Next.js determina automáticamente si una página es estática (puede ser prerrenderizada) si no tiene requisitos de datos bloqueantes. Las páginas optimizadas pueden almacenarse en caché y servirse al usuario final desde múltiples ubicaciones CDN. Puedes optar por Renderizado del lado del servidor (Server-side Rendering) cuando sea apropiado.
Estos valores predeterminados buscan mejorar el rendimiento de tu aplicación y reducir el costo y la cantidad de datos transferidos en cada solicitud de red.
Durante el desarrollo
Mientras construyes tu aplicación, recomendamos usar las siguientes características para garantizar el mejor rendimiento y experiencia de usuario:
Enrutamiento y renderizado
- Componente
<Link>: Usa el componente<Link>para navegación del lado del cliente y precarga. - Errores personalizados (Custom Errors): Maneja adecuadamente errores 500 y 404
Obtención de datos y almacenamiento en caché
- Rutas API (API Routes): Usa Manejadores de Ruta para acceder a tus recursos backend y evitar que secretos sensibles se expongan al cliente.
- Almacenamiento en caché de datos (Data Caching): Verifica si tus solicitudes de datos están siendo almacenadas en caché o no, y opta por el almacenamiento en caché cuando sea apropiado. Asegúrate de que las solicitudes que no usan
getStaticPropsestén almacenadas en caché cuando sea apropiado. - Regeneración estática incremental (Incremental Static Regeneration): Usa Regeneración Estática Incremental para actualizar páginas estáticas después de que se hayan construido, sin reconstruir todo tu sitio.
- Imágenes estáticas (Static Images): Usa el directorio
publicpara almacenar automáticamente en caché los activos estáticos de tu aplicación, como imágenes.
UI y accesibilidad
- Módulo de fuentes (Font Module): Optimiza fuentes usando el Módulo de Fuentes, que aloja automáticamente tus archivos de fuente con otros activos estáticos, elimina solicitudes de red externas y reduce cambio de diseño (layout shift).
- Componente
<Image>: Optimiza imágenes usando el Componente Image, que optimiza automáticamente las imágenes, evita cambios de diseño y las sirve en formatos modernos como WebP. - Componente
<Script>: Optimiza scripts de terceros usando el Componente Script, que difiere automáticamente los scripts y evita que bloqueen el hilo principal. - ESLint: Usa el plugin incorporado
eslint-plugin-jsx-a11ypara detectar problemas de accesibilidad temprano.
Seguridad
- Variables de entorno (Environment Variables): Asegúrate de que tus archivos
.env.*estén agregados a.gitignorey solo las variables públicas tengan el prefijoNEXT_PUBLIC_. - Política de seguridad de contenido (Content Security Policy): Considera agregar una Política de Seguridad de Contenido para proteger tu aplicación contra varias amenazas de seguridad como cross-site scripting, clickjacking y otros ataques de inyección de código.
Metadatos y SEO
- Componente
<Head>: Usa el componentenext/headpara agregar títulos de página, descripciones y más.
Seguridad de tipos
- TypeScript y Plugin TS: Usa TypeScript y el plugin de TypeScript para mayor seguridad de tipos y para ayudarte a detectar errores temprano.
Antes de ir a producción
Antes de ir a producción, puedes ejecutar next build para construir tu aplicación localmente y detectar cualquier error de construcción, luego ejecuta next start para medir el rendimiento de tu aplicación en un entorno similar a producción.
Core Web Vitals
- Lighthouse: Ejecuta Lighthouse en modo incógnito para entender mejor cómo experimentarán los usuarios tu sitio e identificar áreas de mejora. Esta es una prueba simulada y debe combinarse con datos de campo (como Core Web Vitals).
Analizando paquetes
Usa el plugin @next/bundle-analyzer para analizar el tamaño de tus paquetes JavaScript e identificar módulos y dependencias grandes que puedan estar afectando el rendimiento de tu aplicación.
Adicionalmente, las siguientes herramientas pueden ayudarte a entender el impacto de agregar nuevas dependencias a tu aplicación: