Внедрение интернационализации(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>  
 );  
}  

Заключение

В этом разделе вы познакомились с процессом реализации интернационализации(i18n) в вашем Next.js приложении с помощью next-i18next библиотеки. Предоставляя контент на конкретном языке и позволяя пользователям переключать языки, вы можете создать для своих пользователей привлекательный многоязычный интерфейс.