デプロイ

おめでとうございます！Next.jsアプリケーションをデプロイする準備が整いましたね。このページではNext.js Build APIを使用して、マネージドまたはセルフホスティングでデプロイする方法を紹介します。

Next.js Build API

next buildは本番環境向けに最適化されたアプリケーションを生成します。この標準出力には以下が含まれます:

getStaticPropsまたは自動静的最適化を使用するページのHTMLファイル
グローバルスタイルまたは個別にスコープされたスタイルのCSSファイル
Next.jsサーバーから動的コンテンツをプリレンダリングするJavaScript
Reactを通じてクライアントサイドでインタラクティブ性を実現するJavaScript

この出力は.nextフォルダ内に生成されます:

.next/static/chunks/pages - このフォルダ内の各JavaScriptファイルは同じ名前のルートに関連します。例えば、.next/static/chunks/pages/about.jsはアプリケーションで/aboutルートを表示する際に読み込まれるJavaScriptファイルです
.next/static/media - next/imageから静的にインポートされた画像がハッシュ化されてここにコピーされます
.next/static/css - アプリケーション内の全ページに対するグローバルCSSファイル
.next/server/pages - サーバーからプリレンダリングされたHTMLとJavaScriptのエントリポイント。出力ファイルトレーシングが有効な場合、.nft.jsonファイルが作成され、特定のページに依存する全てのファイルパスが含まれます
.next/server/chunks - アプリケーション全体で複数の場所で使用される共有JavaScriptチャンク
.next/cache - ビルドキャッシュとNext.jsサーバーからのキャッシュされた画像、レスポンス、ページの出力。キャッシュを使用するとビルド時間を短縮し、画像の読み込みパフォーマンスを向上させます

.next内の全てのJavaScriptコードはコンパイルされ、ブラウザバンドルは最適なパフォーマンスを達成し全てのモダンブラウザをサポートするためにミニファイされています。

VercelによるマネージドNext.js

Vercelは設定不要でNext.jsアプリケーションを最速でデプロイする方法です。

Vercelにデプロイすると、プラットフォームが自動的にNext.jsを検出し、next buildを実行し、以下のようなビルド出力を最適化します:

変更されていないアセットをデプロイ間で永続化
コミットごとに一意のURLを持つ不変デプロイ
可能であればページが自動的に静的に最適化
アセット（JavaScript、CSS、画像、フォント）が圧縮されグローバルエッジネットワークから配信
APIルートが無限にスケール可能な分離されたサーバーレス関数として自動最適化
ミドルウェアがコールドスタートなしで即時起動するエッジ関数として自動最適化

さらに、Vercelは以下の機能を提供します:

Next.js Speed Insightsによる自動パフォーマンス監視
自動HTTPSとSSL証明書
（GitHub、GitLab、Bitbucketなどを通じた）自動CI/CD
環境変数のサポート
カスタムドメインのサポート
next/imageによる画像最適化のサポート
git pushによる即時グローバルデプロイ

Next.jsアプリケーションをVercelに無料でデプロイして試してみてください。

セルフホスティング

Node.jsまたはDockerを使用して、全ての機能をサポートしたNext.jsをセルフホスティングできます。いくつかの制限がある静的HTMLエクスポートも可能です。

Node.jsサーバー

Next.jsはNode.jsをサポートする任意のホスティングプロバイダーにデプロイできます。例えばAWS EC2やDigitalOcean Dropletなどです。

まず、package.jsonに"build"と"start"スクリプトがあることを確認してください:

package.json

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

次に、npm run buildを実行してアプリケーションをビルドします。最後に、npm run startを実行してNode.jsサーバーを起動します。このサーバーはNext.jsの全ての機能をサポートします。

next/imageを使用している場合、本番環境でより高性能な画像最適化のために、プロジェクトディレクトリでnpm install sharpを実行してsharpを追加することを検討してください。Linuxプラットフォームでは、sharpが追加設定を必要とする場合があり、過剰なメモリ使用を防ぎます。

Dockerイメージ

Next.jsはDockerコンテナをサポートする任意のホスティングプロバイダーにデプロイできます。KubernetesやHashiCorp Nomadなどのコンテナオーケストレータにデプロイする場合や、任意のクラウドプロバイダーの単一ノード内で実行する場合にこのアプローチを使用できます。

マシンにDockerをインストール
with-dockerの例をクローン
コンテナをビルド: docker build -t nextjs-docker .
コンテナを実行: docker run -p 3000:3000 nextjs-docker

複数の環境で異なる環境変数を使用する必要がある場合は、with-docker-multi-envの例を確認してください。

静的HTMLエクスポート

Next.jsアプリの静的HTMLエクスポートを行いたい場合は、静的HTMLエクスポートドキュメントの手順に従ってください。

その他のサービス

以下のサービスはNext.js v12+をサポートしています。各サービスにNext.jsをデプロイするための例やガイドを紹介します。

マネージドサーバー

豆知識: 上記の例で示したように、Dockerfileを使用できるマネージドプラットフォームもあります。

静的のみ

以下のサービスはoutput: 'export'を使用したNext.jsのデプロイのみサポートしています。

GitHub Pages

また、output: 'export'からの出力を、GitHub Actions、Jenkins、AWS CodeBuild、Circle CI、Azure PipelinesなどのCI/CDパイプラインを通じて、任意の静的ホスティングプロバイダーに手動でデプロイすることもできます。

サーバーレス

豆知識: 全てのサーバーレスプロバイダーがnext startからのNext.js Build APIを実装しているわけではありません。サポートされている機能についてはプロバイダーに確認してください。

自動更新

Next.jsアプリケーションをデプロイする際、リロードせずに最新バージョンを確認したいでしょう。

Next.jsはルーティング時にバックグラウンドでアプリケーションの最新バージョンを自動的に読み込みます。クライアントサイドナビゲーションの場合、next/linkは一時的に通常の<a>タグとして機能します。

豆知識: 新しいページ（古いバージョン）がすでにnext/linkによってプリフェッチされている場合、Next.jsは古いバージョンを使用します。プリフェッチされていない（かつCDNレベルでキャッシュされていない）ページにナビゲートすると、最新バージョンが読み込まれます。

手動のグレースフルシャットダウン

セルフホスティング時、SIGTERMまたはSIGINTシグナルでサーバーがシャットダウンする際にコードを実行したい場合があります。

環境変数NEXT_MANUAL_SIG_HANDLEをtrueに設定し、_document.jsファイル内でそのシグナルのハンドラを登録できます。この環境変数は.envファイルではなく、package.jsonスクリプトに直接登録する必要があります。

豆知識: 手動シグナルハンドリングはnext devでは利用できません。

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

pages/_document.js

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // これはカスタム_documentに追加する必要があります
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}