翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Next.js 向けの Amplify サポート
Amplify は、Next.js を使用して作成されたサーバーサイドレンダリング (SSR) ウェブアプリのデプロイとホスティングをサポートします。Next.js は、JavaScript を使って SPA を開発するための React フレームワークです。画像の最適化やミドルウェアなどの機能を備えた Next.js 15 までの Next.js バージョンでビルドされたアプリをデプロイできます。
開発者は Next.js を使用して、静的サイト生成 (SSG) と SSR を 1 つのプロジェクトに組み合わせることができます。SSG ページはビルド時に、SSR ページはリクエスト時に事前にレンダリングされます。
事前レンダリングを行うと、パフォーマンスと検索エンジンの最適化が向上します。Next.js はサーバー上のすべてのページを事前にレンダリングするので、各ページの HTML コンテンツはクライアントのブラウザーに到達した時点で準備完了です。また、このコンテンツの読み込みも速くなります。読み込み時間が短くなると、エンドユーザーのウェブサイトの体験が向上し、サイトの SEO ランキングにプラスの影響を与えます。また、事前レンダリングを行うと、検索エンジンのボットがウェブサイトの HTML コンテンツを簡単に見つけてクローリングできるようになり、SEO も向上します。
Next.js には、最初のバイトまでの時間 (TTFB) や最初のコンテンツの描画 (FCP) など、さまざまなパフォーマンス指標を測定するための分析サポートが組み込まれています。Next.js の詳細については、Next.js のウェブサイトの「[ご利用開始にあたって](https://nextjs.org/docs/getting-started)」を参照してください。
## Next.js 機能のサポート
Amplify ホスティングコンピューティングは、Next.js バージョン 12 から 15 で構築されたアプリケーションのサーバーサイドレンダリング (SSR) を完全に管理します。
2022 年 11 月にAmplify ホスティングコンピューティングがリリースされる前に Next.js アプリをAmplify にデプロイした場合、アプリは Amplify の以前の SSR プロバイダーであるClassic (Next.js 11 のみ) を使用しています。Amplify ホスティングコンピューティングは、Next.js バージョン 11 以前を使用して作成されたアプリをサポートしていません。Next.js 11 アプリを Amplify ホスティングコンピューティングマネージド SSR プロバイダーに移行することを強くお勧めします。
以下のリストでは、Amplify ホスティングコンピューティング SSR プロバイダーがサポートする特定の機能について説明しています。
**サポートされている機能**
+ サーバーサイドレンダリングのページ (SSR)
+ 静的ページ
+ API ルート
+ ダイナミックルート
+ 全ルートをキャッチ
+ SSG (静的生成)
+ インクリメンタル・スタティック・リジェネレーション (ISR)
+ 国際化 (i18n) サブパスルーティング
+ 国際化 (i18n) ドメインルーティング
+ 国際化 (i18n) 自動ロケール検出
+ ミドルウェア
+ 環境変数
+ 画像の最適化
+ Next.js 13 のアプリケーションディレクトリ
**サポートされていない 機能**
+ エッジ API ルート (*エッジミドルウェアはサポートされていません*)
+ *オンデマンド*インクリメンタル・スタティック・リジェネレーション (ISR)
+ Next.js ストリーミング
+ 静的アセットと最適化されたイメージでのミドルウェアの実行
+ `unstable_after` による応答後にコードを実行する (Next.js 15 でリリースされた実験機能)
### Next.js の画像
画像の最大出力サイズは 4.3 MB を超えることはできません。より大きな画像ファイルをどこかに保存し、Next.js Image コンポーネントを使用してサイズを変更して、Webp または AVIF 形式に最適化してから、小さいサイズとして提供することができます。
Next.js のドキュメントでは、Sharp 画像処理モジュールをインストールして、画像の最適化を本番環境で正しく動作させることを推奨していることに留意してください。ただし、Amplify のデプロイにはこれは必須ではありません。Amplify はお客様に代わって Sharp 画像処理を自動的にデプロイします。
# Amplify への Next.js SSR アプリケーションのデプロイ
デフォルトでは、Amplify は Next.js バージョン 12 から 15 をサポートする Amplify ホスティングのコンピューティングサービスを使用して新しい SSR アプリケーションをデプロイします。Amplify ホスティングコンピューティングは、SSR アプリケーションのデプロイに必要なリソースを完全に管理します。2022 年 11 月 17 日より以前にデプロイした Amplify アカウントの SSR アプリは、クラシック (Next.js 11 のみ) の SSR プロバイダーを使用しています。
クラシック (Next.js 11 のみ) SSR を使用するアプリをAmplify ホスティングコンピューティングSSR プロバイダーに移行することを強く推奨します。Amplify は自動移行を行いません。更新を完了するには、アプリを手動で移行してから新しいビルドを開始する必要があります。手順については、「[Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する](update-app-nextjs-version.md)」を参照してください。
以下の手順で新しい Next.js SSR アプリをデプロイします。
**Amplify ホスティングコンピューティングSSR プロバイダーを使用して SSR アプリを Amplify にデプロイするには**
1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. **[すべてのアプリ]** ページで、**[アプリの新規作成]** を選択します。
1. **[Amplify で構築を開始]** ページで、自分の Git リポジトリプロバイダーを選択し、**[次へ]** を選択します。
1. **[リポジトリブランチを追加]** ページで、次の操作を行います。
1. 「**最近更新されたリポジトリ**」リストで、接続するリポジトリの名前を選択します。
1. **ブランチリストで**、接続するリポジトリブランチの名前を選択します。
1. **[次へ]**をクリックします。
1. アプリには、、お客様に代わって他のサービスを呼び出すときに Amplify が引き受ける IAM サービス ロールが必要です。Amplify ホスティングコンピューティングにサービスロールを自動的に作成させることも、作成したロールを指定することもできます。
+ Amplify が自動的にロールを作成してアプリにアタッチできるようにするには:
1. **[新しいサービスロールの作成と使用]** を選択します。
+ 以前に作成したサービスロールをアタッチするには:
1. **[既存のサービスロールを使用する]** を選択します。
1. リストから使用するロールを選択します。
1. [**次へ**] を選択します。
1. **[レビュー]**ページで、**[保存してデプロイ] **を選択します。
## パッケージ.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 アプリケーションのビルド設定の構成](build-settings.md)」を参照してください。
Amplify が Next.js SSR アプリをデプロイしていることを検出し、`amplify.yml`ファイルが存在しない場合、アプリのビルドスペックが生成され、`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 のビルド設定
Amplify が Next.js 13 以前の SSG アプリをデプロイしていることを検出すると、そのアプリのビルド使用が生成され、`baseDirectory` が `out` に設定されます。ファイルが存在するアプリをデプロイする場合は、`amplify.yml`ファイル内で`baseDirectory`を手動で`out`に設定する必要があります。`out` ディレクトリは、エクスポートされた静的アセットを保存するために Next.js が作成するデフォルトのフォルダです。アプリのビルド仕様設定を構成するときは、アプリの設定と一致するように `baseDirectory` フォルダの名前を変更します。
次の例が示すのは、`baseDirectory` を `out` に設定することで、ビルドアーティファクトが SSG ページのみをサポートする Next.js 13 以前のアプリケーション用であることを示すアプリのビルド設定です。
```
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`に設定する必要があります。これは、SSG ページと SSR ページの両方をサポートする Next.js `WEB_COMPUTE` アプリケーションで Amplify が使用するのと同じ `baseDirectory` 設定です。
以下は、`baseDirectory` が `.next` に設定された Next.js 14 SSG 専用アプリケーションのビルド設定の例です。
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
# 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 コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. 移行する Next.js アプリを選択します。
**注記**
Amplify コンソールでアプリを移行する前に、まず Next.js バージョン 12 以降を使用するようにアプリの package.json ファイルを更新する必要があります。
1. ナビゲーションペインで [**アプリの設定**] の [**一般**] を選択します。
1. アプリに *Classic (Next.js 11のみ)* **SSRプロバイダー**を使用してデプロイされたブランチがある場合は、アプリのホームページにバナーが表示されます。バナーで [**移行**] を選択します。
1. 移行確認ウィンドウで3つのステートメントを選択し、[**移行**] を選択します。
1. 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
```
# 静的 Next.js アプリに SSR 機能を追加します。
Amplify でデプロイされた既存の静的 (SSG) Next.js アプリに SSR 機能を追加できます。SSG アプリを SSR に変換するプロセスを開始する前に、Next.js バージョン 12 以降を使用するようにアプリを更新し、SSR 機能を追加してください。次に、以下のステップを実行する必要があります。
1. を使用して AWS Command Line Interface 、アプリケーションのプラットフォームタイプを変更します。
1. アプリにサービスロールを追加します。
1. アプリのビルド設定で出力ディレクトリを更新します。
1. アプリが 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 マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. Amplify アカウントでまだサービスロールを作成していない場合は、「[サービスロールの追加](amplify-service-role.md)」を参照してこの前提条件の手順を完了してください。
1. サービスロールを追加する静的 Next.js アプリを選択します。
1. ナビゲーションペインで [**アプリの設定**] の [**一般**] を選択します。
1. ** [アプリの詳細]**ページで、**[編集]** を選択します。
1. **サービスロール** で、既存のサービスロールの名前、またはステップ 2 で作成したサービスロールの名前を選択します。
1. **[保存]** を選択します。
## ビルド設定の更新
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 ファイルの更新
サービスロールを追加してビルド設定を更新したら、アプリの`package.json`ファイルを更新します。次の例のように、Next.js アプリが SSG ページと SSR ページの両方をサポートすることを示すようにビルドスクリプト`"next build"`を設定します。
```
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
```
Amplify はリポジトリ内の`package.json`ファイルへの変更を検出し、SSR 機能を使用してアプリを再デプロイします。
# 環境変数をサーバーサイドランタイムからアクセスできるようにします。
Amplify ホスティングは、Amplify コンソールのプロジェクト構成で環境変数を設定することにより、アプリケーションのビルドに環境変数を追加することをサポートしています。
ただし、Next.js サーバーコンポーネントはデフォルトではこれらの環境変数にアクセスできません。この動作は、ビルドフェーズでアプリケーションが使用する環境変数に保存されているシークレットを保護するためのものです。
特定の環境変数を Next.js にアクセスできるようにするには、Amplify ビルド仕様ファイルを変更すると Next.js が認識する環境ファイルに設定できます。これにより、Amplify はアプリケーションをビルドする前にこれらの環境変数をロードできます。
**重要**
デプロイアーティファクトにアクセスできるユーザーは読み取ることができるため、認証情報、シークレット、または機密情報を環境変数に保存しないことを強くお勧めします。
SSR コンピューティング関数に AWS リソースへのアクセスを許可するには、[IAM ロールを使用する](amplify-SSR-compute-role.md)ことをお勧めします。
以下のビルド仕様例は、ビルドコマンドセクションに環境変数を追加する方法を示しています。
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env | grep -e API_BASE_URL >> .env.production
- env | grep -e NEXT_PUBLIC_ >> .env.production
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- .next/cache/**/*
```
この例では、ビルドコマンドセクションには、アプリケーションのビルドを実行する前に環境変数を`.env.production`ファイルに書き込む 2 つのコマンドが含まれています。Amplify ホスティングを使用すると、アプリケーションがトラフィックを受信したときに、アプリケーションがこれらの変数にアクセスできます。
前の例のビルドコマンドセクションの次の行は、ビルド環境から特定の変数を取得して`.env.production`ファイルに追加する方法を示しています。
```
- env | grep -e API_BASE_URL -e APP_ENV >> .env.production
```
ビルド環境に変数が存在する場合、`.env.production`ファイルには以下の環境変数が含まれます。
```
API_BASE_URL=localhost
APP_ENV=dev
```
前の例のビルドコマンドセクションの次の行は、特定のプレフィックスを付けた環境変数を`.env.production`ファイルに追加する方法を示しています。この例では、プレフィックス`NEXT_PUBLIC_`の付いた変数がすべて追加されます。
```
- env | grep -e NEXT_PUBLIC_ >> .env.production
```
プレフィックス`NEXT_PUBLIC_`の付いた変数がビルド環境に複数存在する場合、`.env.production`ファイルは次のようになります。
```
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
NEXT_PUBLIC_GRAPHQL_ENDPOINT=uowelalsmlsadf
NEXT_PUBLIC_FEATURE_FLAG=true
```
## モノレポの SSR 環境変数
SSR アプリをモノレポにデプロイしていて、特定の環境変数が Next.js にアクセスできるようにする場合は、`.env.production` ファイルのプレフィックスにアプリケーションルートを付ける必要があります。次の Nx モノレポ内の Next.js アプリのビルド仕様例は、ビルドコマンドセクションに環境変数を追加する方法を示しています。
```
version: 1
applications:
- frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
- npx nx build app
artifacts:
baseDirectory: dist/apps/app/.next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
buildPath: /
appRoot: apps/app
```
前述の例のビルドコマンドセクションの次の行は、ビルド環境から特定の変数を取得して、アプリケーションルート `apps/app` を持つモノレポのアプリの `.env.production` ファイルに追加する方法を示しています。
```
- env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
```
# Next.js アプリをモノリポジトリにデプロイする
Amplify は、一般的なモノレポのアプリだけでなく、npm ワークスペース、pnpm ワークスペース、Yarn ワークスペース、Nx、および Turborepo を使用して作成されたモノレポのアプリもサポートします。アプリをデプロイすると、Amplify は使用しているモノレポジトリのビルドフレームワークを自動的に検出します。Amplify は、npmワークスペース、Yarnワークスペース、またはNxのアプリにビルド設定を自動的に適用します。Turborepo と pnpm アプリには、追加設定が必要です。詳細については、「[モノレポビルド設定の構成](monorepo-configuration.md)」を参照してください。
詳細なNxの例については、「[AWS Amplify ホスティングの Next.js のアプリケーション間で Nxを使用してコードを共有する](https://aws.amazon.com/blogs/mobile/share-code-between-next-js-apps-with-nx-on-aws-amplify-hosting/)」というブログ投稿を参照してください。