Pages Router: Next.js と Vercel | Next.js

Vercel は Next.js の開発元が提供しており、Next.js を第一級サポートしています。Next.js アプリを Vercel にデプロイすると、以下のことがデフォルトで行われます:

静的生成 (Static Generation) を使用するページとアセット（JS、CSS、画像、フォントなど）は、超高速な Vercel CDN から自動的に配信されます。
サーバーサイドレンダリング (SSR) と API ルートを使用するページは、自動的に独立したサーバーレス関数 (Serverless Functions) になります。これにより、ページレンダリングとAPIリクエストが無限にスケールします。

Vercel には他にも多くの機能があります:

カスタムドメイン: Vercel にデプロイ後、Next.js アプリにカスタムドメインを割り当てることができます。詳細はドキュメントをご覧ください。
環境変数: Vercel 上で環境変数を設定できます。設定方法はドキュメントを参照してください。設定した環境変数は Next.js アプリ内で使用可能です。
自動 HTTPS: HTTPS はデフォルトで有効化（カスタムドメイン含む）されており、追加設定は不要です。SSL証明書は自動更新されます。

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

以下の手順は任意です。実際に試すか、読み進めるだけでも構いません。

Vercel にデプロイ後、可能であれば以下の操作を試してみてください:

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

このコメント内の Preview URL をクリックしてみてください。加えた変更が確認できるはずです。

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

このプレビューURLをチームメンバーと共有し、即座にフィードバックを得ることができます。

プレビューデプロイに問題がなければ、main ブランチにマージしてください。マージすると、Vercel が自動的に本番デプロイを行います。

これまでに説明したワークフローは DPS（Develop: 開発、Preview: プレビュー、Ship: 公開）と呼ばれています:

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

Next.js アプリ開発時にはこのワークフローの使用を強く推奨します。アプリの反復開発が大幅に高速化されます。

Next.js と Vercel