JSS Next.jsアプリにおけるルーティングとページ構成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.jsは ページ という概念を中心に構築されたファイルシステムベースのルーターを備え、高度な動的ルーティング機能を備えています。
JSSはNext.jsサンプルアプリでNext.jsルーティングシステムを使用しています。JSS Next.jsアプリケーションを作成する際、ファイル/src/pages/...path.tsxで定義された任意のキャッチオールルートでインスタンス化され、Sitecoreデータに基づいてページを合成・レンダリングするJSS Next.jsを支援します。
以下の図は、JSS Next.jsアプリにおけるルーティングプロセスの概要を示しています:
ブラウザでページにアクセスする際、任意のキャッチオールルートは、ページ上で定義されたデータ取得方法であるgetStaticPropsまたはgetServerSidePropsにパス情報を、コンテキストオブジェクト上でトークン化された配列として渡します。
ページプロップファクトリーはパス情報を使って正規化されたSitecoreアイテムパスを構築し、SitecoreレイアウトサービスREST APIまたはSitecore GraphQLエッジスキーマに要求してアイテムのレイアウトデータを取得します。
表示名ベースのルーティングを設定する
JSS SDKバージョン22.9以降は、表示名ベースのルーティングをサポートしています。表示名ベースのルーティングは、アイテム名フィールドではなくSitecore項目の表示名フィールドからURLを派生させ、ユーザーフレンドリーでローカライズされたURLの作成に柔軟性を提供します。
!注現在、これはSSRでのみサポートされています。SSGのサポートはまだ利用できません。これは大幅なアーキテクチャ変更が必要なためです。
表示名ベースのルート用のサイトマップを生成する
ディスプレイ名ルート用のサイトマップを生成するには、パッチファイルを使ってSitecoreの設定をカスタマイズする必要があります。
ディスプレイ名ベースのルート用サイトマップを生成するには:
-
linkManager構成にカスタマイズされたローカライズドクラスを追加します。
-
構成でuseDisplayName属性をtrueに設定するようにしてください:
-
以下のサンプルパッチファイルを参考にしてください:
-
環境を再デプロイしてください。
-
コンテンツエディターを開き、コンテンツ ツリーのサイトに移動します。
-
Sitemap >設定に行き、URLオプションセクションで、カスタムパッチ設定のリンクプロバイダー名を同じクラス名で更新してください。
!注パッチを展開した後、サイトマップは表示名ベースのルートのみが生成されます。標準的なアイテム名ベースのルートはサイトマップに表示されなくなります。
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コンポーネントを使用します。
Next.js JSSサンプルアプリを基に作成されたJSS Next.jsアプリケーションは、デフォルトでサブパスルーティングを使用しています。Next.jsドメイン ルーティングをサポートしていますが、JSS Next.jsアプリでこの戦略を使うにはカスタム実装が必要です。
!重要静的HTMLエクスポートプロセス( next/exportまたはJSS CLIコマンドjss export)は多言語アプリをサポートしていません。 アプリケーションを静的HTMLファイルとしてエクスポート するにはローカライズを無効にする必要があります。