Vercel は Next.js の開発者によって作成され、Next.js を第一級サポートしています。Next.js アプリを Vercel にデプロイすると、デフォルトで以下のことが行われます。

• Static Generation を使用するページやアセット（JS、CSS、画像、フォントなど）は、デフォルトで Vercel CDN から配信され、非常に高速です。
• Server-Side Rendering や API Routes を使用するページは、自動的に隔離された Serverless Functions になり、ページレンダリングや API リクエストは無限にスケーリングできるようになります。

Vercel には、以下のような多くの機能があります。

• カスタムドメイン: Vercel にデプロイすると、Next.js アプリにカスタムドメインを割り当てることができます。ドキュメントはこちらをご覧ください。

• 環境変数: Vercel で環境変数を設定することもできます。ドキュメントはこちらをご覧ください。その後、Next.js アプリでこれらの環境変数を使用できます。

• 自動 HTTPS: HTTPS はデフォルトで有効になっており（カスタムドメインを含む）、追加の設定は不要です。SSL 証明書は自動的に更新されます。

プラットフォームの詳細については、Vercel のドキュメントをご覧ください。

プッシュごとにプレビューデプロイメント

以下の手順はオプションです。試すか、そのまま読み進めてください。

Vercel にデプロイした後、可能であれば以下のことを試してみてください。

• アプリに新しいブランチを作成します。
• 変更を加えて GitHub にプッシュします。
• プルリクエストを作成します（GitHub ヘルプページ）。

vercel ボットからのコメントがプルリクエストページに表示されるはずです。

このコメント内のプレビュー URL をクリックしてみてください。追加した変更が表示されるはずです。

プルリクエストが開いている間、Vercel はプッシュごとにそのブランチのプレビューデプロイメントを自動的に作成します。プレビュー URL は常に最新のプレビューデプロイメントを指します。

このプレビュー URL を共同作業者と共有し、すぐにフィードバックを得ることができます。

プレビューデプロイメントが良好であれば、main にマージします。これにより、Vercel は自動的に本番デプロイメントを作成します。

開発、プレビュー、シップ

ここで、DPS と呼ばれるワークフロー、すなわち開発、プレビュー、シップについて説明します。

• 開発: Next.js でコードを記述し、Next.js 開発サーバーを実行してホットリロード機能を活用しました。
• プレビュー: GitHub のブランチに変更をプッシュし、Vercel は URL 経由でアクセス可能なプレビューデプロイメントを作成しました。このプレビュー URL を他の人と共有してフィードバックを得ることができます。コードレビューに加えて、デプロイメントプレビューも行うことができます。
• シップ: プルリクエストを main にマージして本番環境にリリースしました。

Next.js アプリを開発する際には、このワークフローを使用することを強くお勧めします。これにより、アプリのイテレーションがさらに速くなります。