આંતરરાષ્ટ્રીયકરણ(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. ભાષા-વિશિષ્ટ સામગ્રી પ્રદાન કરીને અને વપરાશકર્તાઓને ભાષાઓ બદલવા માટે સક્ષમ કરીને, તમે તમારા વપરાશકર્તાઓ માટે એક આકર્ષક બહુભાષી અનુભવ બનાવી શકો છો.