Next.js の概要

Next.js は、React ベースのフレームワークであり、サーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) をサポートしています。これにより、高速なパフォーマンスと優れた SEO を実現することができます。

Sitecore XM Cloud は Headless SXA というスターターキットを提供しており、このスターターキットでは Next.js Pages Router をベースに提供されているため、XM Cloud を利用して Web サイトを構築する場合は、Next.js の Tips がそのまま役に立ちます。

主な特徴

Next.js の主な特徴は以下の通りです。

サーバーサイドレンダリング (SSR): リクエストごとにページをレンダリングし、動的なコンテンツを提供します。
静的サイト生成 (SSG): ビルド時にページを生成し、キャッシュ可能な静的ファイルを提供します。
インクリメンタル静的再生成(ISR): 静的サイト生成（SSG）の利点を活かしつつ、動的なコンテンツ更新を可能にします。ISRを使用すると、ビルド時に生成された静的ページを、バックグラウンドで再生成することができます。
API ルート: API エンドポイントを簡単に作成でき、バックエンドの機能を統合できます。
自動コード分割: ページごとに必要なコードのみを読み込み、初期ロード時間を短縮します。
TypeScript サポート: TypeScript をネイティブにサポートし、型安全な開発が可能です。

利用シーン

上記の機能は、以下のようなシーンに最適です。

高速なパフォーマンスが求められるウェブサイト
SEO を重視するウェブサイト
動的なコンテンツを提供するウェブアプリケーション
静的なコンテンツを提供するブログやドキュメントサイト

コンテンツの量が多いサイトにおいて毎回 SSG でコンテンツの生成をする動作をすると、ページ公開のたびに build が発生する形となってしまいます。これに対して ISR を利用することで差分のコンテンツ生成で対応できるようになります。

Next.js を使用することで、React の利点を最大限に活かしつつ、パフォーマンスと SEO に優れたウェブアプリケーションを構築することができます。

このサイトで提供しているサンプル

ここで紹介をしている Next.js に関する内容にたいして、すべてサンプルを以下の GitHub のリポジトリで提供しています。

haramizu / Next.js-sample GitHub にて Next.js を利用したサンプルを提供しています

サンプルアプリ

現在は、以下のサンプルアプリを提供しています。