JSS Next.js アプリでの静的生成またはエクスポート用のページのリストの準備

Version: 20.x
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Next.js JSS アプリには、1 つの動的キャッチオール ルートがありますが、特に指定しないと、アプリケーションはどのページにアクセスしているかを把握していません。動的ルートで利用できるパスについてアプリケーションに指定するには、ルートが GetStaticPaths 関数を実装してエクスポートする必要があります。

GetStaticPaths とサイトマップ フェッチャー

GetStaticPaths 関数は、どのパスやページにデータをフェッチし、受け取ったデータに基づいてプリレンダリングすればいいかを識別する役割を担います。

関数は、SitecoreSitemapFetcher クラスのインスタンスを使用します。これは、ルートで使用可能なパスのリストを収集する src/lib/sitemap-fetcher.ts ファイルで定義されています。

  • 切断された開発モードでは、SitemapFetcher インスタンスにより、DisconnectedSitemapService のインスタンスを通じて、ManifestInstance を使用してページのリストが生成されます。

    マニフェスト ファイルは sitecore/manifest/sitecore-import.json に保管され、JSS CLI コマンド jss manifest を実行するか、jss start またはjss start:disconnected-proxy スクリプトで Next.js アプリケーションを開始することで生成できます。DisconnectedSitemapService はマニフェスト ルート上で繰り返し、すべてのパスをプリレンダリングのために生成します。すべてのリクエストに getStaticPaths が実行されるため、ページはプリレンダリングされません。

  • 本番モードでは、SitemapFetcher インスタンスは GraphQLSitemapService を使用してプリレンダリングするパスをフェッチします。

GraphQL サイトマップ サービス

GraphQL サイトマップ サービスは、SitecoreGraphQL エンドポイントからサイト パスのリストを取得します。このサービスは通常、GetStaticPaths の実装と合わせて使用されます。Next.js は、パスのリストを使用して、静的生成およびエクスポート機能のデータを取得します。

設定

サンプル アプリケーションの /src/lib/sitemap-fetcher.ts では、既定の SitemapFetcher 設定の検査と変更が行えます。

このサービスは、次のもので事前設定されています。

  • temp/config.graphQLEndpoint にある endpoint

  • temp/config.sitecoreApiKey にある apiKey

  • temp/config.jssAppName にある siteName

rootItemId を指定することもできます。Sitecore のインスタンスでは 1 つのアプリケーションに複数のサイト/アプリケーションを含めることができるため、サービスは現在のアプリのページのリストを取得するためにルート アイテム ID を必要とします。rootItemId を指定しない場合は、サービスは GraphQL とアプリ名を使用して現在の JSS アプリのために検出を試みます。

ヒント

パフォーマンスを考慮して、GraphQL のさらなるロックアップを避けるため、rootItemId を指定することを強くお勧めします。

GraphQL サイトマップ サービス インスタンスのために rootItemId を指定しないと、Next.js 用の JSS を使用する際に SXA 統合でエラーが発生することがあります。

機能とプロセス

このサービスは、fetchSSGSitemap および fetchExportSitemap メソッドを公開します。

静的エクスポートの場合は、fetchExportSitemap を使用します。静的エクスポートは多言語アプリをサポートしていないため、この関数は言語を 1 つだけ受け入れ、その言語の GraphQL クエリのみ実行します。

静的生成 (SG) には、fetchSSGSitemap が使用されます。この関数は、サポートされている各種言語を受け入れます。サンプル アプリケーションでは既定で国際化が有効になっているため、ロケール プロパティが含まれており、各言語に対して GraphQL クエリに実行します。

GraphQLSitemapService を使用して fetchSSGSitemap/fetchExportSitemap を呼び出すと、サービスは次の手順を実行します。

  • 指定された rootItemPath を使って、rootItemId をフェッチします。

  • rootItemId と指定された locale を使用してアイテムをフェッチします。

  • 読み込まれたアイテムを SG または静的 HTML エクスポート用の正しい形式にマージします。

クエリ

アイテムをフェッチし、サイトマップを生成するため、GraphQL サイトマップ サービスが使用する既定の GraphQL クエリをカスタムクエリに置換することができます。そうするには、GraphQLSitemapService クラスを拡張し、fetchSSGSitemap および fetchExportSitemap によって内部で使用される fetchSitemap メソッドをオーバーライドします。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、