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.

Añadir SSR funcionalidad a una aplicación Next.js estática

Puede añadir SSR funcionalidad a una aplicación static (SSG) Next.js existente implementada con Amplify. Antes de iniciar el proceso de conversión de la SSG aplicaciónSSR, actualícela para que utilice la versión 12 o posterior de Next.js y añada SSR funciones. A continuación, tendrá que realizar los siguientes pasos.

Actualización de la plataforma

Existen tres valores válidos para el tipo de plataforma. Una SSG aplicación está configurada según el tipo de plataformaWEB. Una SSR aplicación que utilice la versión 11 de Next.js está configurada en el tipo de plataformaWEB_DYNAMIC. Para las aplicaciones implementadas en Next.js 12 o versiones posteriores mediante procesamiento SSR administrado por Amplify Hosting, el tipo de plataforma se establece en. WEB_COMPUTE

Cuando implementaste tu aplicación como una SSG aplicación, Amplify estableció el tipo de plataforma en. WEB Usa AWS CLI para cambiar la plataforma de tu aplicación aWEB_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. Sigue estos pasos para añadir un rol de servicio a una SSG aplicación que ya esté implementada con Amplify.

Actualización de la configuración de compilación

Antes de volver a implementar tu aplicación con SSR funciones, debes actualizar la configuración de compilación de la aplicación para establecer 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.

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, configura el script de compilación "next build" para indicar que la aplicación Next.js es compatible con ambas páginasSSG. SSR

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},

Amplify detecta el cambio en el package.json archivo de tu repositorio y vuelve a implementar la aplicación con funciones. SSR