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.

# Incorporación de la funcionalidad SSR a una aplicación Next.js estática
<a name="redeploy-ssg-to-ssr"></a>

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
<a name="update-platform"></a>

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
<a name="add-service-role"></a>

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
<a name="update-build-settings"></a>

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
<a name="update-package.json-file"></a>

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.