Next.js Multisiteアドオンのトラブルシューティング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このトピックでは、Next.js Multisiteアドオンの一般的な問題と、考えられる解決策について説明します。
サイトの解決をデバッグする
特定のドメインの解決済みサイトが予想どおりでない場合は、JSSデバッグ ツールを使用してトラブルシューティングを行うことができます。
Multisiteアドオンのデバッグを有効にするには:
-
マルチサイトの デバッグ ログ を有効にするには、sitecore-jss:multisite名前空間を有効にします。
-
必要に応じて、DEBUG_DEPTH環境変数を使用してデバッグの深さを増やします。
デバッグ ログを有効にすると、アプリのブートストラップ フェーズ中にSitecoreから取得したサイト情報を確認できます。 SiteResolverはこの情報を使用して、ホスト名に基づいてサイトを決定します。
またMultisiteMiddleware解決されたサイト名など、各要求の詳細情報を示すデバッグ トレース ログも確認できます。
Next.jsアセットのCORSエラーを解決します (Vercel以外のホスティング サービスの場合)
Vercel以外のホスティングサービスを使用している場合、Next.jsアセットリクエスト(<mysite>/_next/static/<path>)に対してCross-Origin Resource Sharing(CORS)エラーが発生する場合があります。
Next.jsアセットのCORSエラーを解決するには:
-
PUBLIC_URL環境変数が設定されていることを確認します。この変数は、Sitecoreエディターとの統合に必要です (これがないと、Pages/エクスペリエンス エディターでの相対的なNext.jsアセット リクエストは失敗します)。
-
マルチサイト構成で使用されるすべてのドメインが、Access-Control-Allow-Originヘッダーなどを使用して、PUBLIC_URL変数に使用されるドメインにアクセスできることを確認します。
この問題は、Vercelにデプロイされたアプリケーションには影響しません。これはVercelデプロイでVERCEL_URL環境変数がパブリックURLとして使用されるためです。 VERCEL_URLはデプロイ時に生成され、すべての配信元がアクセスできます。
ホストドメイン名の欠落によるCORSの問題を解決
Cross-Origin Resource Sharing(CORS)エラーは、CORSヘッダー設定にドメイン名がない場合、CMホストで発生する可能性があります。この問題を軽減するために、新しいcors-header.jsプラグインを提供し、sitecoreApiHostヘッダーがない場合に追加します。
このプラグインを使用すると、XM Cloudのリモートソースから異なるフォントを使用しようとすると発生する可能性のある関連するCORSの問題を修正することもできます。
Vercelでアプリをホストしているときの401の不正なエラーを解決します
Vercelは、新しいプロジェクトに対してデフォルトでデプロイメント保護を有効にします。XM Cloud環境がデプロイメント保護と連携するように構成されていない場合、VERCEL_URLを使用して静的アセットにアクセスするときに401 unauthorizedエラーが発生する可能性があります。
このエラーを解決するには、Deployment Protectionと連携するようにアプリを設定する か、Deployment Protectionを無効にします。