Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する - AWS Amplify ホスティング

Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する

新しい Next.js アプリをデプロイすると、デフォルトで Amplify はサポートされている最新バージョンの Next.js を使用します。現在、Amplify ホスティングコンピューティングSSR プロバイダーは Next.js バージョン 15 をサポートしています。

Amplify コンソールは、Next.js バージョン 12 から 15 を完全にサポートする Amplify ホスティングコンピューティングサービスの 2022 年 11 月のリリース前にデプロイされたアカウント内のアプリケーションを検出します。コンソールには、Amplify の以前の SSR プロバイダーである Classic (Next.js 11 のみ) を使用してデプロイされた、ブランチのあるアプリを識別する情報バナーが表示されます。Amplify ホスティングコンピューティングSSR プロバイダーにアプリを移行することを強く推奨します。

ホストされている Next.js 11 アプリケーションを Next.js 12 以降に更新すると、デプロイがトリガーされるときに "target" property is no longer supported エラーが生じることがあります。この場合、Amplify ホスティングコンピューティングに移行する必要があります。

アプリとそのすべての運用ブランチを同時に手動で移行する必要があります。アプリにはクラシック (Next.js 11 のみ) ブランチと Next.js 12 以降のブランチの両方を入れることはできません。

以下の手順を使用して、アプリをAmplify ホスティングコンピューティングSSR プロバイダーに移行します。

アプリをAmplify ホスティングコンピューティングSSR プロバイダーに移行するには
  1. AWS マネジメントコンソール にサインインし Amplify コンソールを開きます。

  2. 移行する Next.js アプリを選択します。

    注記

    Amplify コンソールでアプリを移行する前に、まず Next.js バージョン 12 以降を使用するようにアプリの package.json ファイルを更新する必要があります。

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

  4. アプリに Classic (Next.js 11のみ) SSRプロバイダーを使用してデプロイされたブランチがある場合は、アプリのホームページにバナーが表示されます。バナーで [移行] を選択します。

  5. 移行確認ウィンドウで3つのステートメントを選択し、[移行] を選択します。

  6. Amplify はアプリをビルドして再デプロイし、移行を完了します。

SSR 移行を元に戻す

Next.js アプリをデプロイすると、Amplify ホスティングはアプリの設定を検出し、アプリの内部プラットフォーム値を設定します。有効なプラットフォーム値は3 つあります。SSG アプリはプラットフォーム値に設定されますWEB。Next.js バージョン 11 を使用する SSR アプリはプラットフォーム値に設定されますWEB_DYNAMIC。Next.js 12 以降の SSR アプリはプラットフォーム値に設定されますWEB_COMPUTE

前のセクションの手順を使用してアプリを移行すると、Amplify はアプリのプラットフォーム値をWEB_DYNAMICからWEB_COMPUTEに変更します。Amplify ホスティングコンピューティングへの移行が完了したら、コンソールで移行を元に戻すことはできません。移行を元に戻すには、AWS Command Line Interfaceを使用してアプリのプラットフォームをWEB_DYNAMICに戻す必要があります。ターミナルウィンドウを開いて次のコマンドを入力し、アプリID とリージョンを独自の情報で更新します。

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