JSS Next.jsアプリでの静的生成またはエクスポート用のページのリストの準備
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.js JSSアプリには、1つの動的キャッチオール ルートがあります。何らかの支援がないと、アプリケーションはアクセスしているページを認識しません。 動的ルートで使用可能なパスをアプリケーションに通知するには、ルートでGetStaticPaths関数を実装してエクスポートする必要があります。
GetStaticPathsとサイトマップフェッチャー
関数GetStaticPathsは、データを取得し、受信したデータに基づいてプリレンダリングするパス/ページを識別する役割を担います。
この関数は、src/lib/sitemap-fetcher.tsファイルで定義されているSitecoreSitemapFetcherクラスのインスタンスを使用して、次のようにルートで使用可能なパスの一覧を収集します。
-
非接続開発モードでは、SitemapFetcherインスタンスはDisconnectedSitemapServiceのインスタンスを介して、ManifestInstanceを使用してページのリストを生成します。
マニフェスト ファイルはsitecore/manifest/sitecore-import.jsonに格納され、JSS CLIコマンドjss manifestを実行するか、スクリプト のjss startまたはjss start:disconnected-proxyを使用してNext.jsアプリケーションを起動することで生成できます。 DisconnectedSitemapServiceはマニフェストルートを反復処理し、プリレンダリング用のすべてのパスを生成します。プリレンダリングされたページがないのは、getStaticPathsリクエストごとに実行されるためです。
-
本番モードでは、SitemapFetcherインスタンスはGraphQLSitemapServiceまたはMultisiteGraphQLSitemapServiceのインスタンスを使用して、プリレンダリングのパスをフェッチします。
GraphQLサイトマップ サービス
サイトマップ フェッチャーは、次の2つの利用可能なGraphQLサイトマップ サービスのいずれかを使用できます。
-
MultisiteGraphQLSitemapService (アプリにNext.js Multisiteアドオンがある場合)。
-
GraphQLSitemapService (Next.js Multisiteアドオンなし)。
サイトマップ サービスは、1つまたは複数のサイトのSitecore GraphQLエンドポイントからサイト パスのリストを取得します (Next.js Multisiteアドオンを使用している場合)。これらのサービスは、通常、GetStaticPaths実装と組み合わせて使用されます。Next.jsは、パスのリストを使用して、静的生成およびエクスポート機能のデータをフェッチします。
構成
サンプル・アプリケーションの /src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.tsでは、デフォルトのSitecoreSitemapFetcher構成を検査および変更できます。
このサービスには、次のものが事前構成されています。
-
endpoint - temp/config.graphQLEndpointから。
-
apiKey - temp/config.sitecoreApiKeyから。
-
Multisiteアドオンを使用する場合、Multisiteリゾルバプラグインからのsitesリスト。そうでなければsiteName - temp/config.jssAppNameから。
機能とプロセス
どちらのサイトマップ サービスもBaseGraphQLSitemapServiceクラスを拡張し、メソッド のfetchSSGSitemapとfetchExportSitemapを公開します。
静的エクスポートの場合、基本サービスはfetchExportSitemap.静的エクスポートは多言語アプリをサポートしていないため、この関数は1つの言語を受け入れ、その言語のGraphQLクエリのみを実行します。
静的生成 (SG) には、fetchSSGSitemapを使用します。この関数は、サポートされている言語の配列を受け入れます。このプロパティにはlocaleプロパティが含まれています。これは、サンプル アプリケーションによって既定で国際化が有効になっているためです。各言語に対してGraphQLクエリを実行します。
fetchSSGSitemap/fetchExportSitemapを呼び出すと、サービスは次の手順を実行します。
-
指定されたlocaleを使用してアイテムをフェッチします。
-
ロードされたアイテムをSGまたは静的HTMLエクスポートの正しい形式でマージします。
クエリ
GraphQLサイトマップサービスがアイテムをフェッチし、カスタムクエリを使用してサイトマップを生成するために使用するデフォルトのGraphQLクエリを置き換えることができます。これを行うには、GraphQLSitemapServiceクラスを拡張し、fetchSSGSitemapとfetchExportSitemapによって内部的に使用されるfetchSitemapメソッドをオーバーライドします。