静的 Next.js アプリに SSR 機能を追加します。

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

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

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

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

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

プラットフォームを更新する

プラットフォームタイプには 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

サービスロールの追加

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

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

1. にサインイン AWS Management Console し、Amplify コンソールを開きます。

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

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

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

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

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

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

ビルド設定の更新

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

以下は、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 ファイルの更新

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

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

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