A nemzetköziesítés(i18n) megvalósítása a következő nyelveken Next.js: Többnyelvű

Ebben a részben végigvezetjük Önt az Internationalization(i18n) alkalmazásában való bevezetésének folyamatán Next.js. Az i18n segítségével többnyelvű élményt teremthet a felhasználók számára, és nyelvspecifikus tartalmat biztosíthat.

next-i18next A könyvtár használata

next-i18next egy népszerű könyvtár az i18n alkalmazásokban való megvalósításához Next.js. A következőképpen adhatja hozzá az i18n-t az alkalmazásához:

Telepítés next-i18next:

npm install next-i18next

Állítsa be a könyvtárat a fájlban next.config.js:

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

Hozzon létre egy konfigurációs fájlt, melynek neve next-i18next.config.js:

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

Használja a könyvtárat az alkalmazásban:

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

Többnyelvű tartalom létrehozása

A telepítés után next-i18next nyelvi fájlokat hozhat létre, például en.json, fr.json, es.json hogy minden nyelven tartalmat biztosítson:

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

Nyelvváltás

A nyelvváltás engedélyezéséhez létrehozhat egy nyelvváltó eszközt, és használhatja a következő i18n.changeLanguage funkciót:

 

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

Következtetés

Ez a rész bemutatta az Internationalization(i18n) megvalósításának folyamatát az alkalmazásban Next.js a könyvtár használatával next-i18next. Azáltal, hogy nyelvspecifikus tartalmat biztosít, és lehetővé teszi a felhasználók számára a nyelvváltást, vonzó többnyelvű élményt teremthet a felhasználók számára.