Optimizaciones
Next.js incluye una variedad de optimizaciones integradas diseñadas para mejorar la velocidad de su aplicación y las Métricas Web Esenciales (Core Web Vitals). Esta guía cubrirá las optimizaciones que puede 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 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 precarga páginas en segundo plano para transiciones más rápidas y fluidas. - Scripts: Basado en las etiquetas nativas
<script>. El Componente de Script le 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 su contenido (lo que puede resultar en mejor SEO), y le permiten personalizar cómo se presenta su contenido en redes sociales, creando una experiencia de usuario más atractiva y consistente en varias plataformas.
El Componente Head en Next.js le permite modificar el <head> de una página. Aprenda más en la documentación del Componente Head.
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 ser almacenados en caché por proveedores CDN para una entrega eficiente.
Analítica y monitoreo
Para aplicaciones grandes, Next.js se integra con herramientas populares de analítica y monitoreo para ayudarle a entender el rendimiento de su aplicación. Aprenda más en las guías de Analítica, OpenTelemetry, e Instrumentación.