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.

Implementación de una aplicación Next.js SSR para Amplify

De forma predeterminada, Amplify implementa nuevas aplicaciones SSR mediante el servicio de cómputo de Amplify Hosting compatible con las versiones 12 a 15. 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 implementó antes del 17 de noviembre de 2022 utilizan el proveedor SSR clásico Next.js (solo 11).

Le recomendamos encarecidamente que migre las aplicaciones con SSR clásico (solo Next.js 11) al proveedor de SSR de cómputo 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 Next.js 1.1 a Amplify Hosting Compute.

Siga las siguientes instrucciones para implementar una nueva Next.js aplicación SSR.

Package.json configuración de archivos

Al implementar una Next.js aplicación, Amplify inspecciona el script de compilación de la aplicación en el package.json archivo para determinar el tipo de aplicación.

El siguiente es un ejemplo del script de creación de una Next.js aplicación. 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 Next.js 14 aplicaciones exclusivas para SSG o versiones posteriores.

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

El siguiente es un ejemplo del script de compilación de una aplicación SSG Next.js 13 o anterior. 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"
},

Amplify la configuración de compilación de una aplicación SSR 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.

Si Amplify detecta que estás implementando una aplicación Next.js SSR y no hay ningún amplify.yml archivo presente, genera una especificación de compilación para la aplicación y se establece en. baseDirectory .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 Next.js aplicación 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/**/*

Amplify la configuración de compilación para una aplicación Next.js SSG 13 o anterior

Si Amplify detecta que estás implementando una aplicación SSG Next.js 13 o anterior, genera una especificación de compilación para la aplicación y se establece en. baseDirectory 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 out directorio es la carpeta predeterminada que se Next.js crea 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 establece out para indicar que los artefactos de compilación son para una aplicación de Next.js 13 años 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/**/*

Amplify la configuración de compilación para una aplicación Next.js SSG 14 o posterior

En la Next.js versión 14, el next export comando quedó obsoleto y se sustituyó por uno output: 'export' en el next.config.js archivo para permitir las exportaciones estáticas. Si está implementando una aplicación exclusiva de Next.js 14 SSG en la consola, Amplify genera una especificación de compilación para la aplicación y la establece en. baseDirectory .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 baseDirectory configuración que Amplify usa para Next.js WEB_COMPUTE las aplicaciones 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 que solo contiene Next.js 14 SSG con el valor establecido en. baseDirectory .next

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*