Compatibilidad de Amplify con Next.js - AWS Amplify Hospedaje

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Compatibilidad de Amplify con Next.js

Amplify admite la implementación y el alojamiento de aplicaciones web renderizadas (SSR) del lado del servidor creadas con Next.js. Next.js es un marco de React para desarrollar con. SPAs JavaScript Puede implementar aplicaciones creadas con versiones de Next.js hasta Next.js 15, con funciones como la optimización de imágenes y el middleware.

Los desarrolladores pueden usar Next.js para combinar la generación de sitios estáticos (SSG) y SSR en un solo proyecto. SSGlas páginas se renderizan previamente en el momento de la compilación y SSR las páginas se renderizan previamente en el momento de la solicitud.

La renderización previa puede mejorar el rendimiento y la optimización de los motores de búsqueda. Como Next.js renderiza previamente todas las páginas del servidor, el HTML contenido de cada página estará listo cuando llegue al navegador del cliente. Este contenido también se puede cargar más rápido. Los tiempos de carga más rápidos mejoran la experiencia del usuario final con un sitio web y tienen un impacto positivo en la clasificación del SEO sitio. La renderización previa también mejora SEO al permitir que los robots de los motores de búsqueda encuentren y rastreen el contenido de un sitio web con facilidad. HTML

Next.js proporciona un soporte analítico integrado para medir varias métricas de rendimiento, como el tiempo hasta el primer byte (TTFB) y el primer contenido de pintura (). FCP Para obtener más información acerca de Next.js, consulte Getting started en el sitio web de Next.js.

Compatibilidad de las características de Next.js

Amplify Hosting compute administra completamente la renderización del lado del servidor (SSR) para las aplicaciones creadas con las versiones 12 a 15 de Next.js.

Si implementaste una aplicación de Next.js en Amplify antes del lanzamiento de Amplify Hosting Compute en noviembre de 2022, tu aplicación utiliza el SSR proveedor anterior de Amplify, Classic (solo Next.js 11). El procesamiento de Amplify Hosting no admite aplicaciones creadas con la versión 11 o anteriores de Next.js. Le recomendamos encarecidamente que migre sus aplicaciones de Next.js 11 al proveedor de procesamiento gestionado SSR Amplify Hosting.

La siguiente lista describe las funciones específicas que admite el SSR proveedor de procesamiento de Amplify Hosting.

Características admitidas
  • Páginas renderizadas del lado del servidor () SSR

  • Páginas estáticas

  • APIrutas

  • Rutas dinámicas

  • Captura de todas las rutas

  • SSG(Generación estática)

  • Regeneración estática incremental (ISR)

  • Enrutamiento de subrutas internacionalizado (i18n)

  • Enrutamiento de dominio internacionalizado (i18n)

  • Detección automática de configuración regional internacionalizada (i18n)

  • Middleware

  • Variables de entorno

  • Optimización de imágenes

  • Directorio de aplicaciones Next.js 13

Características no admitidas
  • Edge API Routes (no se admite el middleware Edge)

  • Regeneración estática incremental bajo demanda () ISR

  • Transmisión de Next.js

  • Ejecución de middleware en activos estáticos e imágenes optimizadas

  • Ejecutar código después de una respuesta con unstable_after (función experimental publicada con Next.js 15)

Imágenes de Next.js

El tamaño máximo de salida de una imagen no puede superar los 4,3 MB. Puede almacenar un archivo de imagen más grande en algún lugar y utilizar el componente de imagen de Next.js para cambiarlo de tamaño y optimizarlo para convertirlo en un formato Webp o un AVIF formato y, a continuación, servirlo con un tamaño más pequeño.

Tenga en cuenta que en la documentación de Next.js se recomienda instalar el módulo de procesamiento de imágenes de Sharp para permitir que la optimización de imágenes funcione correctamente en producción. Sin embargo, esto no es necesario para las implementaciones de Amplify. Amplify implementa Sharp automáticamente en su lugar.