JSS Next.js アプリでの静的生成またはエクスポート用のページのリストの準備
このページの翻訳は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
メソッドをオーバーライドします。