翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 静的 Next.js アプリに SSR 機能を追加します。
<a name="redeploy-ssg-to-ssr"></a>

Amplify でデプロイされた既存の静的 (SSG) Next.js アプリに SSR 機能を追加できます。SSG アプリを SSR に変換するプロセスを開始する前に、Next.js バージョン 12 以降を使用するようにアプリを更新し、SSR 機能を追加してください。次に、以下のステップを実行する必要があります。

1. を使用して AWS Command Line Interface 、アプリケーションのプラットフォームタイプを変更します。

1. アプリにサービスロールを追加します。

1. アプリのビルド設定で出力ディレクトリを更新します。

1. アプリが SSR を使用していることを示すようにアプリの`package.json`ファイルを更新します。

## プラットフォームを更新する
<a name="update-platform"></a>

プラットフォームタイプには 3 つの値があります。SSG アプリはプラットフォームタイプ`WEB`に設定されます。Next.js バージョン 11 を使用する SSR アプリはプラットフォームタイプ`WEB_DYNAMIC`に設定されます。Amplify ホスティングコンピューティングが管理する SSR を使用して Next.js 12 以降にデプロイされたアプリの場合、プラットフォームタイプは `WEB_COMPUTE` に設定されます。

アプリを SSG アプリとしてデプロイしたとき、Amplify はプラットフォームタイプを`WEB`に設定しました。を使用して AWS CLI 、アプリケーションのプラットフォームを に変更します`WEB_COMPUTE`。ターミナルウィンドウを開いて次のコマンドを入力し、赤色のテキストを固有のアプリ ID とリージョンで更新します。

```
aws amplify update-app --app-id abcd1234 --platform WEB_COMPUTE --region us-west-2
```

## サービスロールの追加
<a name="add-service-role"></a>

サービスロールは、Amplify がユーザーに代わって他のサービスを呼び出すときに引き受ける AWS Identity and Access Management (IAM) ロールです。以下の手順に従って、Amplifyで すでにデプロイされている SSG アプリにサービスロールを追加します。

**サービスロールを追加するには**

1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。

1. Amplify アカウントでまだサービスロールを作成していない場合は、「[サービスロールの追加](amplify-service-role.md)」を参照してこの前提条件の手順を完了してください。

1. サービスロールを追加する静的 Next.js アプリを選択します。

1. ナビゲーションペインで [**アプリの設定**] の [**一般**] を選択します。

1. ** [アプリの詳細]**ページで、**[編集]** を選択します。

1. **サービスロール** で、既存のサービスロールの名前、またはステップ 2 で作成したサービスロールの名前を選択します。

1. **[保存]** を選択します。

## ビルド設定の更新
<a name="update-build-settings"></a>

SSR 機能を使用してアプリを再デプロイする前に、アプリのビルド設定を更新して出力ディレクトリを`.next`に設定する必要があります。ビルド設定は、Amplify コンソールまたは`amplify.yml`リポジトリに保存されているファイルで編集できます。詳細については、「[Amplify アプリケーションのビルド設定の構成](build-settings.md)」を参照してください。

以下は、`baseDirectory`が`.next`に設定されているアプリのビルド設定の例です。

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

## package.json ファイルの更新
<a name="update-package.json-file"></a>

サービスロールを追加してビルド設定を更新したら、アプリの`package.json`ファイルを更新します。次の例のように、Next.js アプリが SSG ページと SSR ページの両方をサポートすることを示すようにビルドスクリプト`"next build"`を設定します。

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

Amplify はリポジトリ内の`package.json`ファイルへの変更を検出し、SSR 機能を使用してアプリを再デプロイします。