अंतर्राष्ट्रीयकरण(i18n) को लागू करना Next.js: बहुभाषी

Next.js इस अनुभाग में, हम आपके एप्लिकेशन में अंतर्राष्ट्रीयकरण(i18n) को लागू करने की प्रक्रिया के माध्यम से आपका मार्गदर्शन करेंगे। i18n के साथ, आप उपयोगकर्ताओं के लिए बहुभाषी अनुभव बना सकते हैं और भाषा-विशिष्ट सामग्री प्रदान कर सकते हैं।

next-i18next लाइब्रेरी का उपयोग करना

next-i18next Next.js अनुप्रयोगों में i18n को लागू करने के लिए एक लोकप्रिय लाइब्रेरी है । यहां बताया गया है कि आप अपने एप्लिकेशन में 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 भाषा-विशिष्ट सामग्री प्रदान करके और उपयोगकर्ताओं को भाषाएँ बदलने में सक्षम बनाकर, आप अपने उपयोगकर्ताओं के लिए एक आकर्षक बहुभाषी अनुभव बना सकते हैं।