Implementace internacionalizace(i18n) v Next.js: Vícejazyčné

V této části vás provedeme procesem implementace internacionalizace(i18n) do vaší Next.js aplikace. S i18n můžete vytvořit vícejazyčné prostředí pro uživatele a poskytovat obsah specifický pro daný jazyk.

Používání next-i18next knihovny

next-i18next je oblíbená knihovna pro implementaci i18n v Next.js aplikacích. Zde je návod, jak přidat i18n do své aplikace:

Nainstalujte next-i18next:

npm install next-i18next

Nakonfigurujte knihovnu ve svém next.config.js souboru:

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

Vytvořte konfigurační soubor s názvem next-i18next.config.js:

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

Použijte knihovnu ve své aplikaci:

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

Vytváření vícejazyčného obsahu

Po instalaci next-i18next můžete vytvořit jazykové soubory jako en.json, fr.json, es.json které poskytují obsah v každém jazyce:

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

Přepínání jazyků

Chcete-li povolit přepínání jazyků, můžete vytvořit nástroj pro přepínání jazyků a použít i18n.changeLanguage funkci:

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

Závěr

Tato část vás seznámila s procesem implementace internacionalizace(i18n) ve vaší Next.js aplikaci pomocí next-i18next knihovny. Poskytnutím obsahu specifického pro jazyky a umožněním uživatelům přepínat jazyky můžete svým uživatelům vytvořit poutavé vícejazyčné prostředí.