JSS Next.jsアプリでのルーティングとページ構成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.jsには、ページ の概念に基づいて構築されたファイルシステムベースのルーターが付属しており、高度な動的ルーティングが含まれています。
JSSは、Next.jsサンプル アプリでNext.jsルーティング システムを使用します。JSS Next.jsアプリケーションを作成するとき、JSSがSitecoreデータに基づいてページを作成およびレンダリングするのに役立つ、ファイル /src/pages/...path.tsxで定義されたオプションのキャッチオール ルートを使用してインスタンス化Next.js。
次の図は、JSS Next.jsアプリのルーティング プロセスの概要を示しています。
ブラウザでページにアクセスするとき、オプションのcatch-allルートは、コンテキストオブジェクト上のページgetStaticPropsまたはgetServerSidePropsで定義されたデータフェッチメソッドにパス情報をトークン化された配列として渡します。
Page Props Factoryは、パス情報を使用して正規化されたSitecoreアイテム パスを作成し、Sitecore Layout Service REST APIまたはSitecore GraphQL Edgeスキーマにリクエストを送信してアイテムのレイアウト データを取得します。
JSS Next.jsアプリでのルーティングの国際化
国際化 (i18n) ルーティングは、JSS Next.jsアプリの通常のページルーティング と同様に機能しますが、ルーティングプロセスに追加のロケール/言語ディメンションが導入されます。
Next.jsには 、i18nルーティングのサポートが組み込まれています。 JSS Next.jsアプリケーションでi18nを設定すると、次のようになります。
-
contextオブジェクトには、Next.jsルートlocaleが含まれています。
-
レイアウト サービスは、sc_langパラメーターを通じてlocaleを受け取ります。
ロケール間を移行するには、next/linkモジュールまたはnext/routerモジュールのLinkコンポーネントを使用します。
Sitecoreで <languageEmbedding> 設定を構成できます。Sitecore内部リンクから言語プレフィックス (サブパス ルート) を返すには、設定をasNeededまたはalwaysに設定する必要があります。JSS for Next.jsが提供するLinkコンポーネントは、Sitecoreからの内部リンクのi18nルート遷移を処理します。
Next.js JSSサンプル アプリに基づいて作成されたJSS Next.jsアプリケーションは、デフォルトでサブパス ルーティングを使用します。Next.jsは ドメイン ルーティングをサポートしていますが、JSS Next.jsアプリでこの戦略を使用するには、カスタム実装が必要です。
静的HTMLエクスポートプロセス ( next/exportまたはJSS CLIコマンドjss exportを使用) は、多言語アプリケーションをサポートしていません。 アプリケーションを静的HTMLファイルとしてエクスポート するには、ローカリゼーションを無効にする必要があります。