--- title: "Next.jsマルチサイトアドオン" slug: "the-next-js-multisite-add-on" abstract: "Next.jsマルチサイトアドオンには、単一のNext.jsアプリケーションから複数のサイトをホスティングするための例のセットアップが含まれています。" --- # Next.jsマルチサイトアドオン Next.jsマルチサイトアドオンには、単一のNext.jsアプリケーションから複数のサイトをホストするための例のセットアップが含まれています。 [Next.jsミドルウェア](https://nextjs.org/docs/advanced-features/middleware) を使用して、受信するホスト名に基づいて正しいSitecoreサイトを提供します。 このアドオンは[JSSの初期化装置](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-jss-app-initializer.html "The JSS app initializer")を使って追加します。基礎テンプレートに基づくXM Cloudプロジェクトは、このアドオンを自動的に含みます。 このアドオンには以下が含まれます: - マルチサイト向けのビルドタイムJSS設定プラグインで、Sitecoreからサイト情報を取得します。 - マルチサイト向けのSite Resolverプラグインです。 - マルチサイト用の [Next.jsミドルウェア](https://nextjs.org/docs/advanced-features/middleware) プラグインで、ホスト名に基づいて正しいサイトに書き換えられます。 - 書き換えパスに基づいて site プロップを設定するマルチサイト用のPage Props Factoryプラグインです。 ## 建築 以下の図は、Next.jsマルチサイトアドオンを使用した際の一般的な流れを示しています: アプリケーションはビルドプロセス中にJSS configプラグインを使ってSitecore Experience Edgeからサイト情報を取得します。サイト情報には、各設定されたサイトの名前、ホスト名、デフォルト言語、その他のサイトプロパティが含まれます。 > !注アプリケーションで [国際ルーティング](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/routing-and-page-composition-in-jss-next-js-apps.html#UUID-416f9836-bd1f-e613-a181-9bb667ea4c0a_UUID-a0d91ffb-83c0-223f-b0c8-b4773d2e1bc7 "Internationalized routing in JSS Next.js apps") を設定すると、ルートが現在の言語を決定し、サイトのデフォルト言語がフォールバック言語となります。国際ルーティングを使わない場合、アプリケーションはサイトのデフォルト言語を使用します。 訪問者がページをリクエストすると、MultisiteMiddlewareはそのサイト情報( SiteResolver.getByHost)を用いて、リクエストされたホスト名に基づいてサイトを特定し、その後サイトの書き換えパスに書き換えます。Next.jsアプリはサイトの書き換えパスを解析して正しいサイト情報を取得します。その後、このサイトを使ってレイアウトデータや辞書データなどを取得します。 > !注アプリケーションはパフォーマンス上の理由から、実行時ではなくビルド時にサイト情報を取得します。*Every request**すべてのNext.jsミドルウェア*を呼び出します。新しいサイトの追加は稀なので、技術的には可能ではありますが、ランタイムでサイト情報を取得するのは、訪問者のパフォーマンスに影響を及ぼす可能性があるため最善の解決策ではありません。このプロセスは[webhookを使って自動化し、公開時にNext.jsアプリの自動再展開をトリガー](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/walkthrough--deploying-jss-next-js-apps-to-vercel.html "Walkthrough: Deploying JSS Next.js apps to Vercel")できます。 ![nextjs-multisite-addon-architecture.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/21/sitecore-headless-development/images/nextjs-multisite-addon-architecture.png) ## サイトの書き換えパスの理解 マルチサイトアドオンは、サイトを識別するために書き換えパスを使用します。 このサイトの書き換えパスは以下の通りです: - Multisite Middlewareによって解決されたサイトに設定されました。 - レイアウトデータや辞書データなどを取得するためにNext.jsアプリで読みます。 - 複数のサイトの静的生成を可能にするために使用されます。 Next.js SDKとNext.jsマルチサイトアドオンはこのロジックをカプセル化しているため、直接この経路を操作する必要はありません。しかし、これを理解することでトラブルシューティングやカスタマイズの際に役立ちます。 サイトの書き換えパスの構造は以下の通りです: /\_site\_/ 例えば、fooサイトの/aboutページの書き換えパスは/\_site\_foo/aboutです。 > !注about.tsxのような特定のページを実装しつつキャッチオールルートも使用した場合、キャッチオールルートをトリガーしないようにページルート(/about)をミドルウェア実行から除外しなければなりません。src/middleware.tsファイルのマッチルールを変更するか、src/lib/middleware/plugins/multisite.tsファイルのexcludeRoute関数の返り値を更新することで、そのルートをミドルウェア実行から除外できます。 ## API Next.jsマルチサイトアドオンは以下のAPIを使用します: ### GraphQLSiteInfoService GraphQLSiteInfoServiceはGraphQL Edgeエンドポイントを使ってSitecoreから設定済みのサイト情報(SiteInfo)のリストを取得します。サイト情報にはサイト名、ホスト名、デフォルト言語が含まれます。 サイト情報の設定は[SXAのサイト定義フィールド](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/the-sxa-site-definition-fields.html)を使って行います。 > !重要このサービスはSXAベースのサイトのみを取得し、設定ベースのサイト定義は含まれていません。 Next.js Multisiteアドオンは、/scripts/config/plugins/multisite.tsファイル内にJSS設定プラグインを提供し、GraphQLSiteInfoServiceを使ってサイト情報を取得し、生成されたsrc/temp/configファイル内のsitesプロパティに保存します。 ### SiteResolver SiteResolverクラスは、提供されたサイト情報リスト(SiteInfo)に基づいてホスト名またはサイト名を解析します。 > !注ホスト名でサイトを解決するために、SiteResolverクラスはgetByHostメソッドを使用します。このメソッドは、|、,、または ;で区切られた1つ以上のホスト名を含む文字列を受け入れます。また、ワイルドカード(\*)も受け入れます。 > > getByHost方式は、ジェネリック/ワイルドカードホスト名よりも特定のホスト名を優先します: > > 「order.eu.site.com」→「\*.eu.site.com」→「\*.site.com」→「\*」 > > 同じホスト名で定義された複数のサイトがある場合、このメソッドは最初に見つけたサイトを優先します。 サイト情報のリストはSiteResolverプラグインで収集され、アプリケーションのシングルトン実装に提供されます。アプリは、例えばPage Props Factoryで名前で検索したり、MultisiteMiddlewareでホスト名で検索したりする際に、/src/lib/site-resolver/index.tsファイルでデフォルトで定義されたシングルトン実装を使用します。 サイト収集プロセスには2つのSiteResolverプラグインが関わっています: - DefaultPluginは/src/lib/site-resolver/plugins/default.tsファイルで定義され、ベースnextjsテンプレートによって提供され、ワイルドカード\*ホスト名を使ってconfig.sitecoresiteNameとconfig.defaultLanguageから*設定されたサイト*を読み込みます。デフォルトでは、config.sitecoresiteNameとconfig.defaultLanguageの値は以下から来ます: - JSS 21.6.0以降では、SITECORE\_SITE\_NAME環境変数からconfig.sitecoreSiteNameを設定しています。古いバージョンのJSSでは、JSS\_APP\_NAME環境変数からconfig.jssAppNameを設定できます。そうでなければ、package.jsonファイルのconfig.appNameプロパティからです。 - config.defaultLanguage\- 環境変数DEFAULT\_LANGUAGEから設定されている場合。そうでなければ、package.jsonファイルのconfig.languageプロパティから。 - MultisitePluginは/src/lib/site-resolver/plugins/multisite.tsファイルで定義され、Next.jsマルチサイトアドオンによって提供されます。構成されたサイトの*後の*config.sitesリストに基づいてビルド時に取得したサイトを読み込みます。 最初に設定されたサイトを追加することで、ワイルドカードホスト名の取得サイトよりも優先度が高くなります。これは、まだホスティングを設定しておらず、複数のサイトがワイルドカードを使っているアプリケーション開発段階で役立ちます。 *より具体的なホスト名を設定した後は、それらのサイトが優先されます。* ### MultisiteMiddleware MultisiteMiddleware[Next.jsミドルウェア](https://nextjs.org/docs/advanced-features/middleware)ハンドラはホスト名に基づいて適切なSitecoreサイトに書き換えます。ミドルウェアプラグインは、/src/lib/middleware/plugins/multisite.tsファイルに定義されたマルチサイトミドルウェアハンドラーを使用します。 MultisiteMiddlewareミドルウェアハンドラー: - リクエストされたホストヘッダーに基づいて SiteResolver でサイトを解決します。 - sc\_siteクッキーにはサイト名の値、x-sc-rewriteヘッダーには書き換えられたパスの値を設定し、ミドルウェアを使った後に再利用可能です。 - 特定のサイトへの応答を、サイトの書き換えパスを使って書き換えます。 > !ヒント例えば、[プレビューURL](https://vercel.com/docs/concepts/deployments/preview-deployments#preview-urls)のように各サイトごとに専用ドメインVercel持っていない場合。その場合、sc\_siteクエリ文字列パラメータを指定することで、アプリケーションに特定のサイトを強制的に使うことができます。例えば、https://foo.site.com?sc\_site=bar。 > > sc\_siteクッキーはサイト閲覧中の次のリクエストに使われるため、すべてのリクエストにこれを追加する必要はありません。この動作はuseCookieResolutionオプションによって設定されます。useCookieResolutionオプションを有効にするのは[Vercelプレビュー](https://vercel.com/docs/concepts/deployments/preview-deployments)展開(process.env.VERCEL\_ENV === 'preview')のみです。 ### normalizeSiteRewrite normalizeSiteRewrite関数はサイトリライトパスからサイトデータを削除します(例えば、アプリケーションが適切にレイアウトデータを取得できるように)。これは、/src/lib/extract-path/plugins/multisite.tsファイル内のマルチサイトパス抽出プラグインで使用されます。 ### getSiteRewriteData getSiteRewriteData関数は[、書き換えパス](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-next-js-multisite-add-on.html#UUID-9bb63a35-b04a-20f4-2ef1-44cceec9d00a_section-idm1403006226426923 "Understanding the site rewrite path")からサイトデータ(site\_name)を抽出します。これは/src/lib/page-props-factory/plugins/site.tsファイルのマルチサイトPage Props Factoryプラグインで利用されています。 ### MultisiteGraphQLSitemapService MultisiteGraphQLSitemapServiceは[複数のサイトの静的生成のためにページリストを取得する](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/preparing-the-list-of-pages-for-static-generation-or-export-in-jss-next-js-apps.html "Preparing the list of pages for static generation or export in JSS Next.js apps")ために使用されます。 ## 制限 Next.jsマルチサイトアドオンには以下の制限があります: - バーチャルフォルダは、公開対象がExperience Edgeの場合、Edgeの公開ロジックから除外されるためサポートされません。 - サイト情報はビルド時にのみ取得されます。新しいサイトが追加されたりホスト名が変更された場合は、アプリケーションを再構築する必要があります。 - 構成ベースのサイト定義は現在含まれていません。取得されるのはSXAベースのサイトのみです。 - Next.js i18n [ドメインルーティング](https://nextjs.org/docs/advanced-features/i18n-routing#domain-routing) や自動ローカレ検出は、必ずしもマルチサイトシナリオ向けに設計されたものではありません。例えば、複数のドメインを同じデフォルトロケージにマッピングすることはできません。もし制限がある場合は、専用のレンダリングホスト(単一のサイト)でサイトをサービスすることも可能です。 - 404および500のカスタムエラーページは現在サポートされていません。代わりに、デフォルトのエラーページを使用してください。