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:

• Componentes del servidor (Server Components): Next.js usa Componentes del Servidor por defecto. Estos se ejecutan en el servidor y no requieren JavaScript para renderizarse en el cliente, por lo que no impactan el tamaño de tus paquetes JavaScript del lado del cliente. Puedes usar Componentes del Cliente (Client Components) cuando necesites interactividad.
• División de código (Code-splitting): Los Componentes del Servidor permiten la división automática de código por segmentos de ruta. También puedes considerar la carga diferida (lazy loading) de Componentes del Cliente y 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, haciendo que la navegación sea casi instantánea. Puedes desactivar la precarga cuando sea necesario.
• Renderizado estático (Static Rendering): Next.js renderiza estáticamente Componentes del Servidor y del Cliente en el servidor durante el build y almacena en caché el resultado para mejorar el rendimiento. Puedes optar por el Renderizado dinámico (Dynamic Rendering) para rutas específicas cuando sea apropiado.
• Almacenamiento en caché (Caching): Next.js almacena en caché solicitudes de datos, resultados renderizados de componentes, activos estáticos y más, para reducir las solicitudes de red a tu servidor, base de datos y servicios backend. Puedes desactivar el caché cuando sea apropiado.

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

• Diseños (Layouts): Usa diseños para compartir UI entre páginas y habilitar renderizado parcial (partial rendering) en la navegación.
• Componente <Link>: Usa este componente para navegación del lado del cliente y precarga.
• Manejo de errores (Error Handling): Maneja adecuadamente errores generales y errores 404 con páginas personalizadas.
• Patrones de composición (Composition Patterns): Sigue los patrones recomendados para Componentes del Servidor y del Cliente, y verifica la ubicación de tus límites "use client" para evitar aumentar innecesariamente el paquete JavaScript del cliente.
• Funciones dinámicas (Dynamic Functions): Ten en cuenta que funciones como cookies() y la prop searchParams activarán Renderizado dinámico para toda la ruta (o aplicación si se usan en el Diseño raíz (Root Layout)). Asegúrate de que su uso sea intencional y envuélvelas en límites <Suspense> cuando sea apropiado.

Nota importante: El prerenderizado parcial (Partial Prerendering) (Experimental) permitirá que partes de una ruta sean dinámicas sin activar el renderizado dinámico para toda la ruta.

Obtención de datos y caché

• Componentes del servidor (Server Components): Aprovecha la obtención de datos en el servidor.
• Manejadores de ruta (Route Handlers): Usa estos para acceder a recursos backend desde Componentes del Cliente, pero evita llamarlos desde Componentes del Servidor para prevenir solicitudes adicionales.
• Streaming: Usa UI de carga y React Suspense para enviar UI progresivamente desde el servidor al cliente.
• Obtención paralela de datos (Parallel Data Fetching): Reduce cascadas de red obteniendo datos en paralelo cuando sea posible. Considera también precargar datos.
• Caché de datos (Data Caching): Verifica si tus solicitudes de datos están siendo cacheadas y activa el caché cuando sea apropiado. Asegúrate de que las solicitudes que no usan fetch estén cacheadas.
• Imágenes estáticas (Static Images): Usa el directorio public para almacenar en caché automáticamente activos estáticos como imágenes.

UI y accesibilidad

• Formularios y validación (Forms and Validation): Usa Acciones del Servidor (Server Actions) para manejar envíos de formularios, validación del lado del servidor y manejo de errores.

• 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-a11y integrado para detectar problemas de accesibilidad temprano.

Seguridad

• Tainting: Previene la exposición de datos sensibles al cliente marcando objetos o valores específicos.
• Acciones del servidor (Server Actions): Asegura la autorización de usuarios para llamar Acciones del Servidor. Revisa las prácticas de seguridad recomendadas.

• Variables de entorno (Environment Variables): Asegúrate de que tus archivos .env.* estén en .gitignore y que solo variables públicas tengan el prefijo NEXT_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

• API de metadatos (Metadata API): Mejora el SEO con títulos, descripciones y más.
• Imágenes Open Graph (OG): Prepara tu aplicación para compartir en redes sociales.
• Sitemaps y Robots: Ayuda a los motores de búsqueda a indexar tus páginas.

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).

• Hook useReportWebVitals: Envía datos de Core Web Vitals a herramientas de análisis.

Análisis de paquetes

Usa el plugin @next/bundle-analyzer para analizar el tamaño de tus paquetes JavaScript. También considera estas herramientas:

• Import Cost
• Package Phobia
• Bundle Phobia
• bundlejs

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.