---
title: "Next.jsのJSSサンプルアプリにおける国際化"
slug: "internationalization-in-the-jss-sample-app-for-next-js"
abstract: "Next.js JSSアプリが国際化を可能にする方法"
---
# Next.jsのJSSサンプルアプリにおける国際化

Next.jsサンプルアプリを基に作成された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#UUID-7fdcb86a-05bb-c380-6e6e-26df1bb07aa7_UUID-a0d91ffb-83c0-223f-b0c8-b4773d2e1bc7 "Internationalized routing in JSS Next.js apps") をサポートしています。ドメインルーティングにはカスタム実装が必要です。

Next.js JSSアプリケーションのソースディレクトリには、アプリケーションがサポートするlocalesおよびdefaultLocaleの定義next.config.jsが含まれています:

i18n: {
 locales: 'en', 'da-DK',
 defaultLocale: packageConfig.language,
}

-   localesアプリケーションでサポートしたいすべての言語であり、Sitecoreで定義されている言語と一致(または少なくともそのサブセット)でなければなりません。このNext.jsの設定オプションにはいくつかの [制限があります](https://nextjs.org/docs/advanced-features/i18n-routing#limits-for-the-i18n-config)。
-   defaultLocaleは、ロケールが接頭辞で始まらないパスを訪れる際に使われるローカです。値は、config.languageオプションのためにファイルpackage.jsonで設定した値に設定されます。

Next.jsは追加のi18n機能を提供せず、どのコンテンツ翻訳ライブラリを使うべきかについて意見を述べていません。コンテンツのローカライズを有効にするために、JSS Next.jsアプリは[next-localizationライブラリ](https://github.com/StarpTech/next-localization)を使用します。アプリコンポーネント(定義src/pages/\_app.tsxファイル)では、JSS Next.jsアプリケーションがnext-localizationモジュールからi18nプロバイダーを取り込み、Next.jsが提供する値のプロパティpageProps.locale、dictionaryのプロパティを使って初期化します。これはSitecore辞書サービスのデータです。これらの物件にはページ・プロップス・ファクトリーがあります:

function App({ Component, pageProps }: AppProps): JSX.Element {
 const { dictionary, ...rest } = pageProps;

 return (
 <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
 <Component {...rest} />
 </I18nProvider>
 );
}

動的ルートの場合、JSS Next.jsアプリはSitecoreSitemapFetcherクラスのインスタンスを用いて、localeフィールドの取得を処理し、経路の静的パスを準備する際に関数getStaticPathsを用います。

## コンテンツの翻訳

ページの内容を翻訳するには、useI18nフックを使用できます。フックは翻訳機能tと現在の言語localeを提供します。

例えば:

import { useI18n } from 'next-localization';

const MultilingualComponent = (): JSX.Element => {
 const { t, locale } = useI18n();

 return (
 <div>
 <p>Translated text: {t('custom-key')}</p>
 <p>The current language is: {locale()}</p>
 </div>
 );
};

export default MultilingualComponent;