Wdrażanie internacjonalizacji(i18n) w języku Next.js: wielojęzycznym

W tej sekcji przeprowadzimy Cię przez proces wdrażania internacjonalizacji(i18n) w Twojej Next.js aplikacji. Dzięki i18n możesz stworzyć wielojęzyczne doświadczenie dla użytkowników i zapewnić treści specyficzne dla języka.

Korzystanie z next-i18next Biblioteki

next-i18next to popularna biblioteka do implementacji i18n w Next.js aplikacjach. Oto jak możesz dodać i18n do swojej aplikacji:

Zainstaluj next-i18next:

npm install next-i18next

Skonfiguruj bibliotekę w swoim next.config.js pliku:

const { i18n } = require('./next-i18next.config');  
  
module.exports = {  
  i18n,  
};  

Utwórz plik konfiguracyjny o nazwie next-i18next.config.js:

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};  

Skorzystaj z biblioteki w swojej aplikacji:

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}  

Tworzenie treści wielojęzycznych

Po zainstalowaniu next-i18next możesz utworzyć pliki językowe, takie jak en.json, fr.json, es.json aby zapewnić zawartość w każdym języku:

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}  

Zmiana języka

Aby umożliwić przełączanie języków, możesz utworzyć narzędzie do zmiany języka i skorzystać z i18n.changeLanguage funkcji:

 

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>  
 );  
}  

Wniosek

W tej sekcji przedstawiono proces wdrażania internacjonalizacji(i18n) w Next.js aplikacji przy użyciu next-i18next biblioteki. Dostarczając treści dostosowane do konkretnego języka i umożliwiając użytkownikom zmianę języka, możesz stworzyć dla swoich użytkowników wciągające, wielojęzyczne doświadczenie.