అంతర్జాతీయీకరణ(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. భాష-నిర్దిష్ట కంటెంట్‌ను అందించడం ద్వారా మరియు భాషలను మార్చడానికి వినియోగదారులను ప్రారంభించడం ద్వారా, మీరు మీ వినియోగదారుల కోసం ఆకర్షణీయమైన బహుభాషా అనుభవాన్ని సృష్టించవచ్చు.