अन्तर्राष्ट्रियकरण(i18n) को कार्यान्वयनमा Next.js: बहुभाषी

Next.js यस खण्डमा, हामी तपाइँको आवेदनमा अन्तर्राष्ट्रियकरण(i18n) लागू गर्ने प्रक्रिया मार्फत मार्गदर्शन गर्नेछौं । 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 भाषा-विशिष्ट सामग्री प्रदान गरेर र प्रयोगकर्ताहरूलाई भाषाहरू स्विच गर्न सक्षम गरेर, तपाईंले आफ्ना प्रयोगकर्ताहरूका लागि एक आकर्षक बहुभाषी अनुभव सिर्जना गर्न सक्नुहुन्छ।