このセクションでは、アプリケーションに国際化(i18n) を実装するプロセスについて説明します Next.js。 i18n を使用すると、ユーザーに多言語エクスペリエンスを作成し、言語固有のコンテンツを提供できます。
next-i18next
図書館 の利用
next-i18next
は、アプリケーションに i18n を実装するための人気のあるライブラリです Next.js。 i18n をアプリケーションに追加する方法は次のとおりです。
インストール next-i18next
:
npm install next-i18next
ファイル内でライブラリを構成します next.config.js
。
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
};
という名前の構成ファイルを作成します next-i18next.config.js
。
module.exports = {
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
},
};
アプリケーションでライブラリを使用します。
import { useTranslation } from 'next-i18next';
function MyComponent() {
const { t } = useTranslation();
return(
<div>
<p>{t('welcome')}</p>
</div>
);
}
多言語コンテンツの作成
を インストールした後 next-i18next
、 、 のような言語ファイルを作成して en.json
、 各言語でコンテンツを提供できます。 fr.json
es.json
// en.json
{
"welcome": "Welcome!"
}
// fr.json
{
"welcome": "Bienvenue!"
}
// es.json
{
"welcome": "¡Bienvenido!"
}
言語の切り替え
言語の切り替えを可能にするには、言語切り替えツールを作成し、次の i18n.changeLanguage
関数を使用します。
import { useTranslation } from 'next-i18next';
function LanguageSwitcher() {
const { i18n } = useTranslation();
const handleChangeLanguage =(newLanguage) => {
i18n.changeLanguage(newLanguage);
};
return(
<div>
<button onClick={() => handleChangeLanguage('en')}>English</button>
<button onClick={() => handleChangeLanguage('fr')}>Français</button>
<button onClick={() => handleChangeLanguage('es')}>Español</button>
</div>
);
}
結論
Next.js このセクションでは、ライブラリを使用してアプリケーション に国際化(i18n) を実装するプロセスを紹介しました next-i18next
。 言語固有のコンテンツを提供し、ユーザーが言語を切り替えられるようにすることで、ユーザーにとって魅力的な多言語エクスペリエンスを作成できます。