Vercel上でNext.jsを動かす利点
ここからは、VercelとNext.jsを組み合わせることの利点を紹介します。
VercelとNext.jsを組み合わせることで、静的アセットとサーバーレス関数で構築されたハイブリッドアプリケーションの最適なソリューションになります。
Next.jsはVercelによって作成され、以降Vercelと開発者コミュニティによって積極的な保守とサポートがされています。Next.jsのすべての機能はVercel上で設定不要ですぐに利用することが可能です。
Vercel上で利用できる、Next.jsの特徴的な機能を紹介します。
インクリメンタル静的再生（ISR）
Next.jsのプリレンダリングには、静的生成（Static-site Generation：SSG）、サーバーサイドレンダリング（Server-side Rendering：SSR）の2つの方式があります（詳しくは、連載の今後の記事で解説します）。
SSGはページの読み込み速度が最も早い方法ですが、ビルド時間が長いのと、リアルタイムのデータを表示できないというデメリットがあります。
一方SSRの場合、リアルタイムデータの表示に対応できるものの、動的に毎回ページを作成するため、大量のアクセスがあった場合にパフォーマンスが低下する可能性があります。
ISRはSSGをユーザーの利用に応じて、一定のタイミングで行う機能です。
例えば、キャッシュ作成から60秒間経過後アクセスがあった場合、バックグラウンドでキャッシュ更新を行い、ページを更新するという指定ができます。用途としては、多数の商品と最新の在庫と価格を表示しなければいけないECサイト等での利用が想定されます。
ただし、この設定ではすべてのユーザーが60秒間同じページのキャッシュをみることになります。例えばECサイトであれば商品に間違った値段を設定してしまったり、来週発売予定の商品を掲載してしまい、急いで修正したりしたとしても60秒間は表示され続けてしまうことになります。
そこで便利な機能として、オンデマンド再検証（On-Demand Revalidation）（ベータ版）があります。特定のページのキャッシュを手動でパージすることができ、先のような急いでページを修正しなければならないユースケースにも対応が可能です。
CDN
SSGのページと各種アセット（JS, CSS, 画像, フォントなど）は自動で高速なVercel Edge Networkに配置されます。
サーバーレス関数
Next.jsはSSRとAPIルートを使用しているページは設定不要で、自動的にサーバーレス関数としてデプロイされます。これはAWS LambdaやAzure Functions、Firebaseのようなクラウドサービスを別途用意する必要がなく、Vercel上で、ワンストップでAPIが提供可能なことを意味します。
さらに、トラフィックに応じて自動的にスケールアップ、スケールダウンがされます。
アナリティクス
Webページのパフォーマンスなどの状況を、設定なし（ゼロコンフィギュレーション）で解析が可能です。
プロジェクトの「Analytics」タブにて確認できます。
左上のReal Experience Scoreはその下にあるFirst Contentful Paint（FCP）、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、First Input Delay（FID）といった4つの指標からスコアリングされます。
この例ですとFCPの速度が遅く改善が必要ということが一目でわかります。これらの指標を改善することでユーザーエクスペリエンスの向上が改善することが可能です。
スコアリングの方法や各指標の詳細はWeb Vitalsをご確認ください。
リアルタイムモニタリング
サーバーレス関数へのアクセスをリアルタイムで確認できることができます。
さらに「Show Details」をクリックすることで詳細な情報を見ることが可能です。
コラム：サーバーレス関数を日本に配置する
サーバーレス関数の配置場所はデフォルトだと海外になっていることが多いです。「Project Settings」にて「Serverless Functions」を選択し、「Tokyo」を選択後「Save」をクリックします。
デプロイ後に変更したい場合は再デプロイを行う必要があります。デプロイされているプロジェクトのハンバーガーメニューから「Redeploy」を選択します。
まとめ
今回は、第1回から一歩進んで、Next.jsとVercelを組み合わせて使う方法を紹介しました。Next.jsをVercel上で動かすことのメリットを感じていただけたかと思います。次回からは、ブログを作りながら、Next.jsの便利な機能を紹介します。
