章45

Next.js と Vercel

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

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

Vercel には他にも多くの機能があります。例えば

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

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

以下の手順はオプションです。試してみるか、読み進めるだけでも構いません。

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

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

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

プルリクエストがオープンな状態の場合、Vercel はプッシュごとにそのブランチのプレビューデプロイを自動的に作成します。プレビュー URL は常に最新のプレビューデプロイを指します。

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

プレビューデプロイが問題なければ、main にマージしてください。これにより、Vercel は自動的に本番デプロイを作成します。

私たちは、DPS と呼ぶワークフロー、つまり「開発 (Develop)」、「プレビュー (Preview)」、「デプロイ (Ship)」について説明しました。

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

Next.js アプリを開発する際には、このワークフローを強くお勧めします。これにより、アプリの反復開発がより迅速になります。

章を完了しました45