Next.js SSRアプリケーションを Amplify にデプロイする - AWS Amplify ホスティング
パッケージ.json ファイルの設定Next.js SSRアプリケーションの Amplify ビルド設定Next.js 13 以前のSSGアプリケーションのビルド設定を増幅するNext.js 14 SSGアプリケーションの Amplify ビルド設定

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

Next.js SSRアプリケーションを Amplify にデプロイする

デフォルトでは、Amplify は Next.js 12、13、14 をサポートする Amplify Hosting のコンピューティングサービスを使用して新しいSSRアプリケーションをデプロイします。Amplify Hosting コンピューティングは、SSRアプリケーションのデプロイに必要なリソースを完全に管理します。SSR 2022 年 11 月 17 日以前にデプロイした Amplify アカウントの アプリケーションは、Classic (Next.js 11 のみ) SSRプロバイダーを使用しています。

Classic (Next.js 11 のみ) を使用して Amplify Hosting コンピューティングSSRプロバイダーSSRにアプリケーションを移行することを強くお勧めします。Amplify は自動移行を行いません。更新を完了するには、アプリを手動で移行してから新しいビルドを開始する必要があります。手順については、Next.js 11 SSRアプリケーションを Amplify Hosting コンピューティングに移行する を参照してください。

新しい Next.js SSRアプリをデプロイするには、次の手順を使用します。

Amplify Hosting コンピューティングSSRプロバイダーを使用してSSRアプリケーションを Amplify にデプロイするには

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

  2. すべてのアプリページで、新しいアプリの作成 を選択します。

  3. Amplify で構築を開始するページで、Git リポジトリプロバイダーを選択し、次へ を選択します。

  4. [リポジトリブランチを追加] ページで、次の操作を行います。

    1. 「最近更新されたリポジトリ」リストで、接続するリポジトリの名前を選択します。

    2. ブランチリストで、接続するリポジトリブランチの名前を選択します。

    3. [Next (次へ)] を選択します。

  5. アプリには、Amplify がユーザーに代わって他のIAMサービスを呼び出すときに引き受けるサービスロールが必要です。Amplify ホスティングコンピューティングにサービスロールを自動的に作成させることも、作成したロールを指定することもできます。

    • Amplify がロールを自動的に作成してアプリにアタッチできるようにするには：

      1. [新しいサービスロールの作成と使用] を選択します。

    • 以前に作成したサービスロールをアタッチするには：

      1. 既存のサービスロールを使用する を選択します。

      2. リストから使用するロールを選択します。

  6. [Next (次へ)] を選択します。

  7. [レビュー]ページで、[保存してデプロイ] を選択します。

パッケージ.json ファイルの設定

Next.js アプリケーションをデプロイすると、Amplify はpackage.jsonファイル内のアプリケーションのビルドスクリプトを検査して、アプリケーションタイプを決定します。

Next.js アプリケーションのビルドスクリプトの例を次に示します。ビルドスクリプト"next build"は、アプリケーションが SSGページと SSRページの両方をサポートしていることを示します。このビルドスクリプトは、Next.js 14 以降のSSGアプリケーションにのみ使用されます。

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

Next.js 13 以前のSSGアプリケーションのビルドスクリプトの例を次に示します。ビルドスクリプト"next build && next export"は、アプリケーションがSSGページのみをサポートしていることを示します。

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

Next.js SSRアプリケーションの Amplify ビルド設定

アプリのpackage.jsonファイルを検査すると、Amplify はアプリのビルド設定をチェックします。ビルド設定は、Amplify コンソールまたはリポジトリのルートにあるamplify.ymlファイルに保存できます。詳細については、「アプリのビルド設定の構成」を参照してください。

Amplify が Next.js SSRアプリケーションをデプロイしていることを検出し、amplify.ymlファイルが存在しない場合、アプリケーションの buildspec を生成し、 baseDirectory に設定します.next。ファイルが存在するアプリをデプロイする場合、amplify.ymlファイル内のビルド設定はコンソールのビルド設定よりも優先されます。そのため、ファイル内のbaseDirectoryは手動で.nextに設定する必要があります。

以下は、baseDirectoryが.nextに設定されているアプリのビルド設定の例です。これは、ビルドアーティファクトが SSG と SSRページをサポートする Next.js アプリ用であることを示します。

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

Next.js 13 以前のSSGアプリケーションのビルド設定を増幅する

Amplify が Next.js 13 以前のSSGアプリケーションをデプロイしていることを検出すると、アプリケーションのビルド仕様が生成され、 baseDirectoryが に設定されますout。ファイルが存在するアプリをデプロイする場合は、amplify.ymlファイル内でbaseDirectoryを手動でoutに設定する必要があります。out ディレクトリは、エクスポートされた静的アセットを保存するために Next.js が作成するデフォルトのフォルダです。アプリのビルド仕様設定を行うときは、アプリの設定に合わせてbaseDirectoryフォルダの名前を変更します。

以下は、ビルドアーティファクトがSSGページのみをサポートする Next.js 13 以前のアプリケーション用であることを示すoutように baseDirectory が に設定されているアプリケーションのビルド設定の例です。

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

Next.js 14 SSGアプリケーションの Amplify ビルド設定

Next.js バージョン 14 では、静的エクスポートを有効にするためにnext export、 コマンドは非推奨になり、 next.config.js ファイルoutput: 'export'で に置き換えられました。Next.js 14 SSG専用アプリケーションをコンソールにデプロイする場合、Amplify はアプリケーションの buildspec を生成し、 baseDirectory を に設定します.next。ファイルが存在するアプリをデプロイする場合は、amplify.ymlファイル内でbaseDirectoryを手動で.nextに設定する必要があります。これは、Amplify が SSG と SSRページの両方をサポートする Next.js WEB_COMPUTEアプリケーションに使用するのと同じbaseDirectory設定です。

以下は、 が にbaseDirectory設定された Next.js 14 SSG専用アプリケーションのビルド設定の例です.next。

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