Next.jsマルチサイトアドオン
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.js Multisiteアドオンには、1つのNext.jsアプリケーションから複数のサイトをホストするための設定例が含まれています。 Next.jsミドルウェア を使用して、受信ホスト名に基づいて正しいSitecoreサイトを提供します。
このアドオンは、JSS初期化子を使用して追加します。基盤テンプレートに基づくXM Cloudプロジェクトには、このアドオンが自動的に含まれます。
このアドオンには、以下のものが含まれています。
-
Sitecoreからサイト情報を取得するマルチサイト用のビルド時JSS設定プラグイン。
-
マルチサイト用のSite Resolverプラグイン。
-
ホスト名に基づいて正しいサイトに書き換えるマルチサイト用のNext.jsミドルウェア プラグイン。
-
マルチサイト用のPage Props Factoryプラグインで、書き換えパスに基づいてsite propを設定します。
建築
次の図は、Next.jsマルチサイト アドオンを使用する場合の一般的なフローを示しています。
アプリケーションは、JSS configプラグインを使用して、ビルドプロセス中にSitecore Experience Edgeからサイト情報をフェッチします。サイト情報には、設定された各サイトの名前、ホスト名、デフォルト言語、およびその他のサイトプロパティが含まれます。
アプリケーションで 国際化ルーティング を構成すると、ルートによって現在の言語が決定され、サイトのデフォルト言語がフォールバック言語になります。国際化ルーティングを使用しない場合、アプリケーションはサイトのデフォルトの言語を使用します。
訪問者がページをリクエストすると、MultisiteMiddlewareはそのサイト情報( SiteResolver.getByHost)を使用して、リクエストされたホスト名に基づいてサイトを特定し、サイトの書き換えパスに書き換えます。Next.jsアプリは、サイトの書き換えパスを解析して、正しいサイト情報を取得します。次に、このサイトを使用して、レイアウトデータや辞書データなどを取得します。
アプリケーションは、パフォーマンス上の理由から、ランタイムではなくビルド時にサイト情報をフェッチします。 Every requestはall Next.js middlewareを呼び出します。新しいサイトの追加はめったに行われないため、実行時にサイト情報を取得することは(技術的には可能ですが)、訪問者のパフォーマンスに影響を与える可能性があるため、最善の解決策ではありません。このプロセスを自動化するには 、Webhookを使用して、公開時にNext.jsアプリの自動再デプロイをトリガーできます。
サイトの書き換えパスを理解する
マルチサイト アドオンは、書き換えパスを使用してサイトを識別します。
このサイトの書き換えパスは次のとおりです。
-
Multisite Middlewareによって解決されたサイトに設定されます。
-
レイアウトデータや辞書データなどを取得するためにNext.jsアプリによって読み取られます。
-
複数のサイトの静的生成を有効にするために使用されます。
Next.js SDKおよびNext.js Multisiteアドオンはこのロジックをカプセル化するため、このパスを直接操作する必要はありません。ただし、それを理解しておくと、トラブルシューティングやカスタマイズを行う際に役立ちます。
サイトの書き換えパスの構造は次のとおりです。
たとえば、fooサイトの /aboutページの書き換えパスは /_site_foo/aboutです。
キャッチオールルートを使用しながら、about.tsxなどの特定のページを実装した場合は、ページルート( /about)をミドルウェアの実行から除外して、キャッチオールルートがトリガーされないようにする必要があります。ミドルウェアの実行からルートを除外するには、src/middleware.tsファイル内のマッチャールールを変更するか、src\lib\middleware\plugins\multisite.tsファイル内のexcludeRoute関数の戻り値を更新します。
APIの
Next.js Multisiteアドオンは、次のAPIを使用します。
GraphQLSiteInfoService
GraphQLSiteInfoServiceは、GraphQL Edgeエンドポイントを使用して、Sitecoreから設定済みのサイト情報(SiteInfo)のリストを取得します。サイト情報には、サイト名、ホスト名、およびデフォルトの言語が含まれます。
サイト情報は、SXAサイト定義フィールドを使用して設定します。
このサービスはSXAベースのサイトのみをフェッチし、設定ベースのサイト定義は含まれません。
Next.js Multisiteアドオンは、/scripts/config/plugins/multisite.tsファイルにJSS設定プラグインを提供します。このプラグインは、GraphQLSiteInfoServiceを使用してサイト情報を取得し、生成されたsrc/temp/configファイルのsitesプロパティに保存します。
SiteResolver
SiteResolverクラスは、指定されたサイト情報リスト (SiteInfo) に基づいて、ホスト名またはサイト名のサイトを解決します。
ホスト名でサイトを解決するために、SiteResolverクラスはgetByHostメソッドを使用します。このメソッドは、|、,、または ;) で区切られた1つ以上のホスト名を含む文字列を受け入れますまた、ワイルドカード (*) も使用できます。
getByHostメソッドは、汎用/ワイルドカード ホスト名よりも特定のホスト名を優先します。
同じホスト名が定義されているサイトが複数ある場合、このメソッドは最初に見つかったものを優先します。
サイト情報のリストは、SiteResolverプラグインを使用して収集され、アプリケーションのシングルトン実装に提供されます。アプリは、Page Props Factoryの名前やMultisiteMiddlewareのホスト名による検索など、サイト検索が必要な場合に、/src/lib/site-resolver/index.tsファイルでデフォルトで定義されているシングルトン実装を使用します。
サイト収集プロセスには、次の2つのSiteResolverプラグインが関係しています。
-
/src/lib/site-resolver/plugins/default.tsファイルで定義され、基本nextjsテンプレートによって提供されるDefaultPluginは、ワイルドカード*ホスト名を使用してconfig.jssAppNameとconfig.defaultLanguageからconfigured siteを読み込みます。デフォルトでは、config.jssAppNameとconfig.defaultLanguageの値は次のものから取得されます。
-
config.jssAppName- JSS_APP_NAME環境変数から (設定されている場合)。それ以外の場合は、package.jsonファイルのconfig.appNameプロパティから。
-
config.defaultLanguage- DEFAULT_LANGUAGE環境変数から (設定されている場合)。それ以外の場合は、package.jsonファイルのconfig.languageプロパティから。
-
-
/src/lib/site-resolver/plugins/multisite.tsファイルで定義され、Next.js Multisiteアドオンによって提供されるMultisitePluginは、サイトのconfig.sitesリストに基づいてビルド時にフェッチされたサイトをロードafter the configured。
最初に設定されたサイトを追加すると、ワイルドカードホスト名を使用してフェッチされたサイトよりも優先度が高くなります。これは、アプリケーションの開発段階で、ホスティングをまだ設定しておらず、複数のサイトがワイルドカードを使用している場合に便利です。 After you configure more specific hostnames, those will be preferred instead.
MultisiteMiddleware
MultisiteMiddlewareNext.js Middlewareハンドラーは、ホスト名に基づいて適切なSitecoreサイトに書き換えます。ミドルウェアプラグインは、/src/lib/middleware/plugins/multisite.tsファイルで定義されているマルチサイトミドルウェアハンドラを使用します。
MultisiteMiddlewareミドルウェア ハンドラーは、次の処理を行います。
-
要求されたホスト ヘッダーに基づいてSiteResolverを持つサイトを解決します。
-
sc_site Cookieにはサイト名の値、x-sc-rewriteヘッダーには書き換えられたパスの値を設定します。これは、次のミドルウェアで再利用できます。
-
サイト書き換えパスを使用して、特定のサイトへの応答を書き換えます。
Vercel Preview URLsなど、各サイトに専用のドメインがないとします。その場合は、sc_siteクエリ文字列パラメーター ( https://foo.site.com?sc_site=barなど) を指定することで、アプリケーションに特定のサイトを使用するように強制できます。
sc_siteCookieは、サイトの閲覧中の後続のリクエストに使用されるため、リクエストごとにこれを追加する必要はありません。この動作は、useCookieResolutionオプションによって構成されます。Vercelプレビューデプロイメント (process.env.VERCEL_ENV === 'preview') のみが、デフォルトでuseCookieResolutionオプションを有効にします。
normalizeSiteRewrite
normalizeSiteRewrite関数は、サイト書き換えパスからサイト データを削除します (たとえば、アプリケーションがレイアウト データを適切に取得できるようにするため)。これは、/src/lib/extract-path/plugins/multisite.tsファイル内のマルチサイトパス抽出プラグインによって使用されます。
getSiteRewriteData
getSiteRewriteData関数は、書き換えパスからサイト データ (site_name) を抽出します。これは、/src/lib/page-props-factory/plugins/site.tsファイルのマルチサイトのPage Props Factoryプラグインで使用されます。
MultisiteGraphQLSitemapService
このMultisiteGraphQLSitemapServiceは 、複数のサイトの静的生成のためのページのリストを取得するために使用されます。
制限
Next.js Multisiteアドオンには、次の制限があります。
-
公開ターゲットがExperience Edgeの場合、仮想フォルダーはEdge公開ロジックから除外されるため、サポートされません。
-
サイト情報はビルド時にのみ取得されます。新しいサイトが追加されたり、ホスト名が変更されたりした場合は、アプリケーションを再構築する必要があります。
-
構成ベースのサイト定義は、現在含まれていません。SXAベースのサイトのみが取得されます。
-
Next.js i18nドメインルーティング と自動ロケール検出は、必ずしもマルチサイトのシナリオを想定したものではありませんでした。たとえば、複数のドメインを同じデフォルトロケールにマップすることはできません。制限が発生した場合は、専用のレンダリング ホスト (つまり、1つのサイト) を使用してサイトを提供することもできます。
-
404および500カスタムエラーページは現在サポートされていません。代わりに、デフォルトのエラーページを使用してください。