Lista de verificación para producción
Antes de llevar su aplicación Next.js a producción, hay algunas optimizaciones y patrones que debería considerar implementar para obtener la mejor experiencia de usuario, rendimiento y seguridad.
Esta página proporciona mejores prácticas que puede usar como referencia durante el desarrollo de su aplicación, antes de pasar a producción y después del despliegue, así como las optimizaciones automáticas de Next.js que debe 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, cargando solo el código necesario para la página actual. También puedes considerar la carga diferida (lazy loading) de bibliotecas de terceros cuando sea apropiado.
- Precarga (Prefetching): Similar a la versión App, precarga rutas cuando los enlaces entran en el viewport.
- Optimización estática automática (Automatic Static Optimization): Next.js detecta automáticamente páginas estáticas (sin requisitos de datos bloqueantes) y las optimiza para caché y distribución CDN. Puedes optar por Renderizado del lado del servidor (SSR) cuando sea necesario.
Estos valores por defecto buscan mejorar el rendimiento de tu aplicación y reducir el costo y 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 este componente para navegación del lado del cliente y precarga. - Errores personalizados (Custom Errors): Maneja adecuadamente errores 500 y 404.
Obtención de datos y caché
- Rutas API (API Routes): Usa manejadores de ruta para acceder a recursos backend y proteger secretos sensibles.
- Caché de datos (Data Caching): Similar a la versión App, verifica el almacenamiento en caché.
- Regeneración estática incremental (ISR): Usa ISR para actualizar páginas estáticas sin reconstruir todo el sitio.
- Imágenes estáticas (Static Images): Igual que en App Router.
UI y accesibilidad
- Módulo de fuentes (Font Module): Optimiza fuentes alojándolas con tus activos estáticos, eliminando solicitudes externas y reduciendo cambio de diseño (layout shift).
- Componente
<Image>: Optimiza imágenes, previene cambios de diseño y sirve formatos modernos como WebP o AVIF. - Componente
<Script>: Optimiza scripts de terceros diferiendo su carga. - ESLint: Usa el plugin
eslint-plugin-jsx-a11yintegrado para detectar problemas de accesibilidad temprano.
Seguridad
- Variables de entorno (Environment Variables): Asegúrate de que tus archivos
.env.*estén en.gitignorey que solo variables públicas tengan el prefijoNEXT_PUBLIC_. - Política de seguridad de contenido (CSP): Considera agregar una CSP para proteger contra amenazas como XSS, clickjacking e inyección de código.
Metadatos y SEO
- Componente
<Head>: Usanext/headpara agregar metadatos.
Seguridad de tipos
- TypeScript y Plugin TS: Usa TypeScript para mayor seguridad de tipos y detección temprana de errores.
Antes de pasar a producción
Ejecuta next build localmente para detectar errores de compilación, luego next start para medir el rendimiento en un entorno similar a producción.
Core Web Vitals
- Lighthouse: Ejecútalo en modo incógnito para evaluar la experiencia del usuario. Combínalo con datos reales (como Core Web Vitals).
Análisis de paquetes
Usa el plugin @next/bundle-analyzer para analizar el tamaño de tus paquetes JavaScript. También considera estas herramientas:
Después del despliegue
Para despliegues en Vercel, recomendamos:
- Analíticas: Panel integrado para entender tráfico, visitantes únicos y vistas de página.
- Speed Insights: Datos de rendimiento en tiempo real.
- Registros (Logging): Registros para depuración y monitoreo. También puedes usar integraciones de terceros.
Nota importante:
Para mejores prácticas completas en despliegues Vercel, incluyendo estrategias para mejorar el rendimiento, consulta la Lista de verificación para producción de Vercel.
Seguir estas recomendaciones te ayudará a construir una aplicación más rápida, confiable y segura para tus usuarios.