Optimizaciones
Next.js incluye una variedad de optimizaciones integradas diseñadas para mejorar la velocidad de tu aplicación y las Core Web Vitals. Esta guía cubrirá las optimizaciones que puedes aprovechar para mejorar la experiencia de usuario.
Componentes integrados
Los componentes integrados abstraen la complejidad de implementar optimizaciones comunes de interfaz de usuario. Estos componentes son:
- Imágenes: Basado en el elemento nativo
<img>. El Componente de Imagen optimiza las imágenes para el rendimiento mediante carga diferida (lazy loading) y redimensionamiento automático según el tamaño del dispositivo. - Enlace (Link): Basado en las etiquetas nativas
<a>. El Componente de Enlace pre-carga páginas en segundo plano para transiciones más rápidas y fluidas. - Scripts: Basado en las etiquetas nativas
<script>. El Componente de Script te da control sobre la carga y ejecución de scripts de terceros.
Metadatos
Los metadatos ayudan a los motores de búsqueda a entender mejor tu contenido (lo que puede resultar en un mejor SEO), y te permiten personalizar cómo se presenta tu contenido en redes sociales, creando una experiencia de usuario más atractiva y consistente en varias plataformas.
La API de Metadatos en Next.js te permite modificar el elemento <head> de una página. Puedes configurar metadatos de dos formas:
- Metadatos basados en configuración: Exporta un objeto de metadatos estático o una función dinámica generateMetadata en un archivo
layout.jsopage.js. - Metadatos basados en archivos: Agrega archivos especiales estáticos o generados dinámicamente a segmentos de ruta.
Además, puedes crear imágenes Open Graph dinámicas usando JSX y CSS con el constructor imageResponse.
Recursos estáticos
La carpeta /public en Next.js puede usarse para servir recursos estáticos como imágenes, fuentes y otros archivos. Los archivos dentro de /public también pueden almacenarse en caché por proveedores de CDN para una entrega eficiente.
Análisis y monitoreo
Para aplicaciones grandes, Next.js se integra con herramientas populares de análisis y monitoreo para ayudarte a entender el rendimiento de tu aplicación. Más información en las guías de OpenTelemetry e Instrumentación.