---
title: "JSS Next.jsアプリにおけるルーティングとページ構成"
slug: "routing-and-page-composition-in-jss-next-js-apps"
abstract: "多言語対応JSS Next.jsアプリにおけるルーティングの概要"
---
# JSS Next.jsアプリにおけるルーティングとページ構成

Next.jsは [ページ](https://nextjs.org/docs/basic-features/pages) という概念を中心に構築されたファイルシステムベースのルーターを備え、[高度な動的ルーティング機能](https://nextjs.org/docs/routing/dynamic-routes)を備えています。

JSSはNext.jsサンプルアプリでNext.jsルーティングシステムを使用しています。JSS Next.jsアプリケーションを作成する際、ファイル/src/pages/...path.tsxで定義された[任意のキャッチオールルート](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes)でインスタンス化され、[Sitecoreデータに基づいてページを合成・レンダリング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/page-composition-in-jss-apps-using-sitecore-data.html "Page composition in JSS apps using Sitecore data")するJSS Next.jsを支援します。

以下の図は、JSS Next.jsアプリにおけるルーティングプロセスの概要を示しています:

![Diagram of JSS Next.js routing process](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/nextjs-sitecore-routing.svg)

ブラウザでページにアクセスする際、任意のキャッチオールルートは、ページ上で定義されたデータ取得方法であるgetStaticPropsまたはgetServerSidePropsにパス情報を、コンテキストオブジェクト上でトークン化された配列として渡します。

ページプロップファクトリーはパス情報を使って正規化されたSitecoreアイテムパスを構築し、[SitecoreレイアウトサービスREST API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")または[Sitecore GraphQLエッジスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema")に要求してアイテムのレイアウトデータを取得します。

## 表示名ベースのルーティングを設定する

JSS SDKバージョン22.9以降は、表示名ベースのルーティングをサポートしています。表示名ベースのルーティングは、アイテム名フィールドではなくSitecore項目の表示名フィールドからURLを派生させ、ユーザーフレンドリーでローカライズされたURLの作成に柔軟性を提供します。

> !注現在、これはSSRでのみサポートされています。SSGのサポートはまだ利用できません。これは大幅なアーキテクチャ変更が必要なためです。

### 表示名ベースのルート用のサイトマップを生成する

ディスプレイ名ルート用のサイトマップを生成するには、[パッチファイルを使ってSitecoreの設定をカスタマイズする必要があります](https://doc.sitecore.com/xp/en/developers/102/platform-administration-and-architecture/use-a-patch-file-to-customize-the-sitecore-configuration.html)。

ディスプレイ名ベースのルート用サイトマップを生成するには:

1.  linkManager構成にカスタマイズされたローカライズドクラスを追加します。
    
2.  構成でuseDisplayName属性をtrueに設定するようにしてください:
    
3.  以下のサンプルパッチファイルを参考にしてください:
    
    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
    <sitecore>
     <linkManager defaultProvider="switchableLinkProvider">
     <providers>
     <add name="customLocalizedProvider" type="Sitecore.XA.Foundation.Multisite.LinkManagers.LocalizableLinkProvider, Sitecore.XA.Foundation.Multisite" cacheExpiration="5" addAspxExtension="false" alwaysIncludeServerUrl="false" encodeNames="true" languageEmbedding="never" languageLocation="filePath" shortenUrls="true" useDisplayName="true" />
     </providers>
     </linkManager>
    </sitecore>
    </configuration>
    
4.  環境を再デプロイしてください。
    
5.  コンテンツエディターを開き、**コンテンツ** ツリーのサイトに移動します。
    
6.  **Sitemap** >**設定**に行き、**URLオプション**セクションで、カスタムパッチ設定の**リンクプロバイダー名**を同じクラス名で更新してください。
    

> !注パッチを展開した後、サイトマップは表示名ベースのルートのみが生成されます。標準的なアイテム名ベースのルートはサイトマップに表示されなくなります。

## JSS Next.jsアプリにおける国際ルーティング

国際化(i18n)ルーティングは [、JSS Next.jsアプリにおける通常のページルーティング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-page-composition-in-jss-next-js-apps.html "Routing and page composition in JSS Next.js apps") と似ていますが、ルーティングプロセスに新たなロケーションや言語の側面を加えます。

Next.jsには[i18nルーティング](https://nextjs.org/docs/advanced-features/i18n-routing)のサポートが組み込まれています。 [JSS Next.jsアプリケーションでi18nを設定する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/internationalization-in-the-jss-sample-app-for-next-js.html "Internationalization in the JSS sample app for Next.js") 際:

-   contextオブジェクトはNext.jsルートlocaleを含みます。
-   [レイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")はsc\_langパラメータを通じてlocaleを受け取ります。

[ロケーション間の移行](https://nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales)には、next/linkモジュールまたはnext/routerモジュールのLinkコンポーネントを使用します。

<languageEmbedding>設定はSitecoreで設定できます。設定は内部リンクから言語プレフィックス(サブパスルート)を返すためにasNeededまたはalwaysに設定されSitecore必要があります。JSSが提供するLinkコンポーネントはNext.jsから来る内部リンクのi18nルート遷移を処理Sitecore。

Next.js JSSサンプルアプリを基に作成されたJSS Next.jsアプリケーションは、デフォルトでサブパスルーティングを使用しています。Next.jsドメイン [ルーティング](https://nextjs.org/docs/advanced-features/i18n-routing#domain-routing)をサポートしていますが、JSS Next.jsアプリでこの戦略を使うにはカスタム実装が必要です。

> !重要静的HTMLエクスポートプロセス( next/exportまたはJSS CLIコマンドjss export)は多言語アプリをサポートしていません。 [アプリケーションを静的HTMLファイルとしてエクスポート](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--export-a-jss-next-js-app-to-static-html-files-with-next-export.html "Walkthrough: Export a JSS Next.js app to static HTML files with next export") するにはローカライズを無効にする必要があります。