close

国際化(i18n) の実装 Next.js: 多言語

このセクションでは、アプリケーションに国際化(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。 言語固有のコンテンツを提供し、ユーザーが言語を切り替えられるようにすることで、ユーザーにとって魅力的な多言語エクスペリエンスを作成できます。