デプロイ

Vercel (推奨)

Next.js を本番環境にデプロイする最も簡単な方法は、Next.js の開発者が提供する Vercel platform を利用することです。Vercel は、静的サイト・JAMstack なアーキテクチャでのデプロイや、サーバーレスファンクション機能をサポートするグローバル CDN を備えたオールインワンプラットフォームです。

はじめに

はじめに、Next.js アプリを GitHubGitLabBitBucket など任意の Git プロバイダーにプッシュしてください。リポジトリはプライベートとパブリックのどちらでも構いません。

次に、以下の手順に従ってください:

  1. Vercel にサインアップしてください(クレジットカードの登録は不要です)。
  2. サインアップすると、Import Project ページに遷移します。「From Git Repository」からデプロイに使用する GitHubGitLabBitBucket などの Git プロバイダーを選択して設定をします(設定は各プロバイダーで次の手順で行います)。
  3. 設定が完了したら、「Import Project From ...」をクリックして Next.js アプリを Vercel にインポートします。アプリが Next.js を使用していることが自動検出され、ビルド設定が設定されます。何も変更する必要はありません。
  4. インポート後、Next.js アプリはデプロイされ、デプロイ用 URL が提供されます。「Visit」をクリックして、デプロイされたアプリを確認しましょう。

おめでとうございます!Next.js アプリのデプロイが完了しました。疑問点がある場合は、Vercel documentation を参照してください。

カスタムサーバーを使用している場合は、代替手法への移行を強くお勧めします(例えば、動的ルーティングを使用するなど)。移行できない場合は、他のホスティング方法を検討してください。

DPS: 開発(Develop)、プレビュー(Preview)、公開(Ship)

ここでは、Vercelが推奨するワークフローについて説明します。Vercelでは、いわゆる DPS ワークフローを支持しています。DPS とは、開発(Develop)・プレビュー(Preview)・公開(Ship)の頭字語です。

  • 開発(Develop): Next.js のコードを書きましょう。開発サーバーを稼働させておき、React Fast Refresh を活用しましょう。
  • プレビュー(Preview): GitHub / GitLab / BitBucket 上に変更をプッシュするたびに、自動的に一意の URL を持つ新しいデプロイを実施します。 プルリクエストを開くと GitHub で見ることができますし、Vercel のプロジェクトページの「デプロイメントのプレビュー」で見ることもできます。詳細はこちらをご覧ください
  • 公開(Ship): 本番環境で公開する準備ができたら、プルリクエストをデフォルトのブランチ (例: master) にマージします。Vercel は自動的に本番環境へのデプロイを行います。

DPS ワークフローを使用することで、コードレビュー に加えて、デプロイ前のプレビュー を行うことができます。各デプロイはユニークな URL を生成し、それを共有したり、統合テストに使用したりできます。

Next.js のための最適化

Vercel は、Next.js のクリエイターが作ったもので、Next.js を最も手厚くサポートしています。

例えば、ハイブリッドページについては完全にサポートされています。

カスタムドメイン、環境変数、自動HTTPS(SSL 化)など

  • カスタムドメイン: Vercel にデプロイする Next.js アプリはカスタムドメインを割り当て可能です。こちらのドキュメントを参照してください
  • 環境変数: Vercel では環境変数を設定できます。詳細は、ここにあるドキュメント を参照してください。Next.js アプリ内でこれらの環境変数を使用できます。
  • 自動 HTTPS(SSL 化): HTTPS はデフォルトで有効になっており(カスタムドメインを含む)、余分な設定は必要ありません。SSL 証明書は自動で更新されます。
  • その他: Vervel というプラットフォームをさらに知るためにドキュメントをご覧ください。

その他のホスティング方法

Node.jsサーバー

Next.js は Node.js に対応しているホスティング環境であれば、どこにでもデプロイできます。 カスタムサーバーを使用している場合はこのようなアプローチになります。

package.json"build""start" のスクリプトが含まれていることを確認してください。

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

next build スクリプトは .next フォルダ内に本番用アプリケーションをビルドします。 ビルド後に実行する next start により、静的に生成されたページとサーバーサイドでレンダリングされたページのハイブリッドページ をサポートする Node.js サーバを起動します。

静的 HTML の出力

Next.js アプリを静的 HTML へと出力したい場合は、ドキュメントの指示に従ってください。デフォルトでは、next export によって out ディレクトリが生成され、 CDN や静的サイトホスティングサービスで配信できます。

ご利用の Next.js アプリが完全に静的サイトの場合でも、Vercel を使用することを強くお勧めします。Vercel は、静的な Next.js アプリが非常に高速に動作するように最適化されています。next export は、Vercel では設定を一切行わずにデプロイしても動作します。