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 en el servidor (SSR) creadas con Next.js. Next.js es un marco de React para desarrollar SPAs con él JavaScript. Puede implementar aplicaciones creadas con versiones de Next.js hasta la versión 15, con características como la optimización de imágenes y middleware. Los desarrolladores pueden utilizar Next.js para combinar la generación de sitios estáticos (SSG) y SSR en un solo proyecto. Las páginas SSG se renderizan previamente en el momento de la compilación y las páginas SSR 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 en el servidor, el contenido HTML de cada página estará preparado 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 SEO del sitio. La renderización previa también mejora el SEO al permitir que los bots de los motores de búsqueda encuentren y rastreen fácilmente el contenido HTML de un sitio web. Next.js ofrece un servicio de asistencia analítico que se integra 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](https://nextjs.org/docs/getting-started) en el sitio web de Next.js. ## Compatibilidad de las características de Next.js El procesamiento de Amplify Hosting administra completamente la renderización del lado del servidor (SSR) para las aplicaciones creadas con las versiones 12 a 15 de Next.js. Si ha implementado una aplicación de Next.js en Amplify antes del lanzamiento del procesamiento de Amplify Hosting en noviembre de 2022, su aplicación utiliza el proveedor de SSR anterior de Amplify, Classic (solo versión 11 de Next.js). 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 SSR gestionado por el procesamiento de Amplify Hosting. La siguiente lista describe las características específicas que admite el proveedor SSR de procesamiento de Amplify Hosting. **Características admitidas** + Páginas renderizadas del servidor (SSR) + Páginas estáticas + Rutas de la API + 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** + Rutas de la API de Edge (*no se admite el middleware de Edge*) + Regeneración estática incremental (ISR) *bajo demanda* + 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` (característica experimental publicada con la versión 15 de Next.js) ### 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 Image de Next.js para cambiarlo de tamaño y optimizarlo a un formato Webp o AVIF y, a continuación, distribuirlo como 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. # Implementación de una aplicación SSR de Next.js en Amplify De forma predeterminada, Amplify implementa nuevas aplicaciones de SSR mediante el servicio de procesamiento de Amplify Hosting compatible con las versiones 12 a 15 de Next.js. La computación de Amplify Hosting administra completamente los recursos necesarios para implementar una aplicación de SSR. Las aplicaciones SSR de su cuenta de Amplify que ha implementado antes del 17 de noviembre de 2022, utilizan el proveedor SSR clásico (solo Next.js 11). Le recomendamos encarecidamente que migre las aplicaciones que utilizan SSR clásico (solo Next.js 11) al proveedor de SSR de procesamiento de Amplify Hosting. Amplify no realiza migraciones automáticas en su lugar. Debe migrar la aplicación manualmente y, a continuación, iniciar una nueva compilación para completar la actualización. Para obtener instrucciones, consulte [Migración de una aplicación SSR de Next.js 11 al procesamiento de Amplify Hosting](update-app-nextjs-version.md). Utilice las siguientes instrucciones para implementar una nueva aplicación SSR de Next.js. **Para implementar una aplicación SSR en Amplify mediante el proveedor de SSR de procesamiento de Amplify Hosting** 1. Inicia sesión en la consola de [Amplify Consola de administración de AWS](https://console.aws.amazon.com/amplify/) y ábrela. 1. En la página **Todas las aplicaciones**, seleccione **Crear nueva aplicación**. 1. En la página **Comenzar a crear con Amplify**, seleccione el proveedor de repositorios de Git y, a continuación, elija **Siguiente**. 1. En la página **Añadir ramificación de repositorio**, haga lo siguiente: 1. En la lista de **Repositorios actualizados recientemente**, seleccione el nombre del repositorio que desea conectar. 1. En la lista de **Ramificaciones**, seleccione el nombre de la ramificación del repositorio que desea conectar. 1. Elija **Siguiente**. 1. La aplicación requiere un rol de servicio de IAM que Amplify asume cuando llama a otros servicios en su nombre. Puede permitir que el procesamiento de Amplify Hosting cree automáticamente un rol de servicio en su lugar, o puede especificar un rol que haya creado usted. + Para permitir que Amplify cree automáticamente un rol y lo asocie a su aplicación: 1. Elija **Crear y utilizar un nuevo rol de servicio**. + Para adjuntar un rol de servicio que haya creado anteriormente: 1. Elija **Utilizar un rol de servicio existente**. 1. Seleccione el rol que desea utilizar de la lista. 1. Elija **Siguiente**. 1. En la página **Revisar**, elija **Guardar e implementar**. ## Configuración del archivo Package.json Al implementar una aplicación Next.js, Amplify inspecciona el script de compilación de la aplicación en el archivo `package.json` para determinar el tipo de aplicación. A continuación, se muestra un ejemplo del script de compilación de una aplicación Next.js. El script de compilación `"next build"` indica que la aplicación es compatible con las páginas SSG y SSR. Este script de compilación también se usa para aplicaciones de Next.js 14 o versiones posteriores exclusivas para SSG. ``` "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, ``` A continuación, se muestra un ejemplo del script de compilación de una aplicación SSG de Next.js 13 o versiones anteriores. El script de compilación `"next build && next export"` indica que la aplicación solo admite páginas SSG. ``` "scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" }, ``` ## Configuración de compilación de Amplify para una aplicación SSR de Next.js Después de inspeccionar el archivo `package.json` de la aplicación, Amplify comprueba la configuración de compilación de la aplicación. Puede guardar la configuración de compilación en la consola de Amplify o en un archivo `amplify.yml` en la raíz de su repositorio. Para obtener más información, consulte [Ajuste de la configuración de compilación de una aplicación de Amplify](build-settings.md). Si Amplify detecta que está implementando una aplicación SSR de Next.js y no hay ningún archivo `amplify.yml`, genera una especificación de compilación para la aplicación y configura `baseDirectory` en `.next`. Si está implementando una aplicación en la que hay un archivo `amplify.yml`, la configuración de compilación del archivo anula cualquier configuración de compilación de la consola. Por lo tanto, debe configurar manualmente `baseDirectory` en `.next` en el archivo. A continuación se muestra un ejemplo de la configuración de compilación de una aplicación donde `baseDirectory` se configura en `.next`. Esto indica que los artefactos de compilación son para una aplicación de Next.js que admite páginas SSG y SSR. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` ## Configuración de compilación de Amplify para una aplicación SSG de Next.js 13 o anterior Si Amplify detecta que está implementando una aplicación SSG de Next.js 13 o versiones anteriores, genera una especificación de compilación para la aplicación y configura `baseDirectory` en `out`. Si está implementando una aplicación en la que hay un archivo `amplify.yml`, debe configurar manualmente `baseDirectory` en `out` en el archivo. El directorio `out` es la carpeta predeterminada que crea Next.js para almacenar los activos estáticos exportados. Al configurar las especificaciones de compilación de la aplicación, cambie el nombre de la carpeta `baseDirectory` para que coincida con la configuración de la aplicación. A continuación, se muestra un ejemplo de la configuración de compilación de una aplicación en la que `baseDirectory` se configura en `out` para indicar que los artefactos de compilación son para una aplicación Next.js 13 o anterior que solo admite páginas SSG. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/* ``` ## Configuración de compilación de Amplify para una aplicación SSG de Next.js 14 o posterior En la versión 14 de Next.js, el comando `next export` quedó obsoleto y se sustituyó por `output: 'export'` en el archivo `next.config.js` para permitir las exportaciones estáticas. Si implementa una aplicación SSG de Next.js 14 en la consola, Amplify genera una especificación de compilación para la aplicación y configura `baseDirectory` en `.next`. Si está implementando una aplicación en la que hay un archivo `amplify.yml`, debe configurar manualmente `baseDirectory` en `.next` en el archivo. Esta es la misma configuración `baseDirectory` que Amplify usa para las aplicaciones `WEB_COMPUTE` de Next.js que admiten páginas SSG y SSR. A continuación se muestra un ejemplo de la configuración de compilación de una aplicación SSG de Next.js 14 con el valor de `baseDirectory` en `.next`. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` # Migración de una aplicación SSR de Next.js 11 al procesamiento de Amplify Hosting Al implementar una nueva aplicación de Next.js, Amplify utiliza de forma predeterminada la versión compatible más reciente de Next.js. Actualmente, el proveedor de SSR de cómputo Amplify Hosting es compatible con la versión 15 de Next.js. La consola de Amplify detecta las aplicaciones de su cuenta que se han implementado antes del lanzamiento en noviembre de 2022 del servicio de procesamiento de Amplify Hosting con total compatibilidad con las versiones 12 a 15 de Next.js. La consola muestra un banner informativo que identifica las aplicaciones con ramificaciones que se han implementado con el anterior proveedor clásico de SSR de Amplify (solo Next.js 11). Se recomienda que migre sus aplicaciones al proveedor SSR de procesamiento de Amplify Hosting. Si está actualizando la aplicación alojada con Next.js 11 a Next.js 12 o a una versión posterior, es posible que se produzca un error `"target" property is no longer supported` cuando se active una implementación. En este caso, debe migrar a Amplify Hosting Compute. Debe migrar manualmente la aplicación y todas sus ramificaciones de producción al mismo tiempo. Una aplicación no puede contener las ramificaciones clásicas (solo Next.js 11) y de Next.js 12 o posteriores. Siga las siguientes instrucciones para migrar una aplicación al proveedor SSR de procesamiento de Amplify Hosting. **Para migrar una aplicación al proveedor de SSR de procesamiento de Amplify Hosting** 1. Inicia sesión en la consola de [Amplify Consola de administración de AWS](https://console.aws.amazon.com/amplify/) y ábrela. 1. Elija la aplicación Next.js que desea migrar. **nota** Antes de migrar una aplicación a la consola de Amplify, debe primero actualizar el archivo package.json de la aplicación para utilizar la versión 12 o posterior de Next.js. 1. En el panel de navegación, elija **Configuración de la aplicación** y **General**. 1. En la página de inicio de la aplicación, la consola muestra un banner si la aplicación tiene ramificaciones implementadas con el *proveedor SSR* **clásico (solo para Next.js 11)**. En el banner, elija **Migrar**. 1. En la ventana de confirmación de migración, elija las tres sentencias y elija **Migrar**. 1. Amplify compilará y volverá a implementar su aplicación para completar la migración. ## Reversión de una migración de SSR Al implementar una aplicación de Next.js, Amplify Hosting detecta la configuración de la aplicación y establece el valor de la plataforma interna de la aplicación. Existen tres valores de plataforma válidos. Una aplicación SSG se configura en el valor de la plataforma `WEB`. Una aplicación SSR que utilice la versión 11 de Next.js se configura en el valor de la plataforma `WEB_DYNAMIC`. Una aplicación SSR de Next.js 12 o posterior se configura en el valor de la plataforma `WEB_COMPUTE`. Al migrar una aplicación siguiendo las instrucciones de la sección anterior, Amplify cambia el valor de la plataforma de la aplicación de `WEB_DYNAMIC` a `WEB_COMPUTE`. Una vez completada la migración al procesamiento de Amplify Hosting, no puede revertir la migración en la consola. Para revertir la migración, debe utilizar AWS Command Line Interface para cambiar la plataforma de la aplicación a `WEB_DYNAMIC`. Abra una ventana de terminal e introduzca el siguiente comando para actualizar el ID y la región de la aplicación con su información exclusiva. ``` aws amplify update-app --app-id abcd1234 --platform WEB_DYNAMIC --region us-west-2 ``` # Incorporación de la funcionalidad SSR a una aplicación Next.js estática Puede añadir la funcionalidad SSR a una aplicación Next.js estática (SSG) existente implementada con Amplify. Antes de iniciar el proceso de conversión de la aplicación SSG a SSR, actualice la aplicación para que utilice la versión 12 de Next.js, o posterior, y añada la funcionalidad SSR. A continuación, tendrá que realizar los siguientes pasos. 1. Usa AWS Command Line Interface para cambiar el tipo de plataforma de la aplicación. 1. Añada un rol de servicio a la aplicación. 1. Actualice el directorio de salida en la configuración de compilación de la aplicación. 1. Actualice el archivo `package.json` de la aplicación para indicar que la aplicación utiliza SSR. ## Actualización de la plataforma Existen tres valores válidos para el tipo de plataforma. Una aplicación SSG se configura para el tipo de plataforma `WEB`. Una aplicación SSR que utilice la versión 11 de Next.js se configura en el tipo de plataforma `WEB_DYNAMIC`. En las aplicaciones implementadas en Next.js 12 mediante la SSR administrada por la computación de Amplify Hosting, el tipo de plataforma se establece en `WEB_COMPUTE`. En el momento en que implementó su aplicación como una aplicación SSG, Amplify configuró el tipo de plataforma en `WEB`. Usa AWS CLI para cambiar la plataforma a la que va tu aplicación`WEB_COMPUTE`. Abra una ventana de terminal e introduzca el siguiente comando, actualizando el texto en rojo con su ID de aplicación y región únicos. ``` aws amplify update-app --app-id abcd1234 --platform WEB_COMPUTE --region us-west-2 ``` ## Adición de un rol de servicio Una función de servicio es la función AWS Identity and Access Management (IAM) que Amplify asume cuando llama a otros servicios en su nombre. Siga estos pasos para añadir un rol de servicio a una aplicación SSG que ya se haya implementado con Amplify. **Para añadir un rol de servicio** 1. Inicia sesión en la consola de [Amplify Consola de administración de AWS](https://console.aws.amazon.com/amplify/) y ábrela. 1. Si aún no ha creado un rol de servicio en su cuenta de Amplify, consulte [Incorporación de un rol de servicio](amplify-service-role.md) para completar este paso previo. 1. Elija la aplicación estática de Next.js a la que desea añadir un rol de servicio. 1. En el panel de navegación, elija **Configuración de la aplicación** y **General**. 1. En la página **Detalles de la aplicación**, elija **Editar** 1. En **Rol de servicio**, elija el nombre de un rol de servicio existente o el nombre del rol de servicio que ha creado en el paso 2. 1. Seleccione **Save**. ## Actualización de la configuración de compilación Antes de volver a implementar su aplicación con la funcionalidad SSR, debe actualizar la configuración de compilación de la aplicación para configurar el directorio de salida en `.next`. Puede editar la configuración de compilación en la consola de Amplify o en un archivo `amplify.yml` almacenado en su repositorio. Para obtener más información, consulte [Ajuste de la configuración de compilación de una aplicación de Amplify](build-settings.md). A continuación se muestra un ejemplo de la configuración de compilación de una aplicación donde `baseDirectory` se configura en `.next`. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` ## Actualización del archivo package.json Después de añadir un rol de servicio y actualizar la configuración de compilación, actualice el archivo `package.json` de la aplicación. Como en el siguiente ejemplo, configure el script de compilación en `"next build"` para indicar que la aplicación Next.js es compatible con las páginas SSG y SSR. ``` "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, ``` Amplify detecta el cambio en el archivo `package.json` de su repositorio y vuelve a implementar la aplicación con la funcionalidad SSR. # Conversión de las variables de entorno en accesibles para los tiempos de ejecución del servidor Amplify Hosting permite añadir variables de entorno a las compilaciones de su aplicación al configurarlas en la configuración del proyecto de la consola de Amplify. Sin embargo, un componente del servidor Next.js no tiene acceso a esas variables de entorno de forma predeterminada. Este comportamiento tiene como objetivo proteger cualquier secreto almacenado en las variables de entorno que utilice su aplicación durante la fase de compilación. Para que Next.js pueda acceder a variables de entorno específicas, puede modificar el archivo de especificación de compilación de Amplify para configurarlas en los archivos de entorno que reconoce Next.js. Esto permite a Amplify cargar estas variables de entorno antes de compilar la aplicación. **importante** Le recomendamos encarecidamente que no almacene credenciales, secretos o información confidencial en las variables de entorno, ya que cualquier usuario con acceso a los artefactos de implementación puede leerlos. Para permitir que su función de cómputo SSR acceda a AWS los recursos, le recomendamos que [utilice las funciones de IAM](amplify-SSR-compute-role.md). El siguiente ejemplo de especificación de compilación muestra cómo añadir variables de entorno en la sección de comandos de compilación. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - env | grep -e API_BASE_URL >> .env.production - env | grep -e NEXT_PUBLIC_ >> .env.production - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/* ``` En este ejemplo, la sección de comandos de compilación incluye dos comandos que escriben variables de entorno en el archivo `.env.production` antes de que se ejecute la compilación de la aplicación. Amplify Hosting permite que su aplicación acceda a estas variables cuando la aplicación recibe tráfico. La siguiente línea de la sección de comandos de compilación del ejemplo anterior muestra cómo tomar una variable específica del entorno de compilación y añadirla al archivo `.env.production`. ``` - env | grep -e API_BASE_URL -e APP_ENV >> .env.production ``` Si las variables existen en su entorno de compilación, el archivo `.env.production` contendrá las siguientes variables de entorno. ``` API_BASE_URL=localhost APP_ENV=dev ``` La siguiente línea de la sección de comandos de compilación del ejemplo anterior muestra cómo añadir una variable de entorno con un prefijo específico al archivo `.env.production`. En este ejemplo, se añaden todas las variables con el prefijo `NEXT_PUBLIC_`. ``` - env | grep -e NEXT_PUBLIC_ >> .env.production ``` Si existen varias variables con el prefijo `NEXT_PUBLIC_` en el entorno de compilación, el archivo `.env.production` tendrá un aspecto similar al siguiente. ``` NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk NEXT_PUBLIC_GRAPHQL_ENDPOINT=uowelalsmlsadf NEXT_PUBLIC_FEATURE_FLAG=true ``` ## Variables de entorno SSR para monorepos Si implementa una aplicación SSR en un monorepo y quiere que Next.js pueda acceder a variables de entorno específicas, tiene que anteponer la raíz de la aplicación en el archivo `.env.production`. El siguiente ejemplo de especificación de compilación de una aplicación Next.js dentro de un monorepo Nx muestra cómo añadir variables de entorno en la sección de comandos de compilación. ``` version: 1 applications: - frontend: phases: preBuild: commands: - npm ci build: commands: - env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production - env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production - npx nx build app artifacts: baseDirectory: dist/apps/app/.next files: - '**/*' cache: paths: - node_modules/**/* buildPath: / appRoot: apps/app ``` Las siguientes líneas de la sección de comandos de compilación del ejemplo anterior muestra cómo tomar variables específicas del entorno de compilación y agregarlas al archivo `.env.production` de una aplicación en un monorepo con la raíz de aplicación `apps/app`. ``` - env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production - env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production ``` # Implementación de una aplicación de Next.js en un monorepo Amplify admite aplicaciones en monorepos genéricos, así como aplicaciones en monorepos creadas con npm workspace, pnpm workspace, Yarn workspace, Nx y Turborepo. Al implementar su aplicación, Amplify detecta automáticamente el marco de compilación de monorepo que está utilizando. Amplify aplica automáticamente la configuración de compilación a las aplicaciones en un npm workspace, Yarn workspace o Nx. Las aplicaciones Turborepo y pnpm requieren una configuración adicional. Para obtener más información, consulte [Modificar la configuración de compilación de monorepo](monorepo-configuration.md). Para ver un ejemplo detallado de Nx, consulte la publicación del blog [Compartir código entre aplicaciones de Next.js con Nx en AWS Amplify Hosting](https://aws.amazon.com/blogs/mobile/share-code-between-next-js-apps-with-nx-on-aws-amplify-hosting/).