ਵਿੱਚ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ(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 ਭਾਸ਼ਾ-ਵਿਸ਼ੇਸ਼ ਸਮੱਗਰੀ ਪ੍ਰਦਾਨ ਕਰਕੇ ਅਤੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਭਾਸ਼ਾਵਾਂ ਬਦਲਣ ਦੇ ਯੋਗ ਬਣਾ ਕੇ, ਤੁਸੀਂ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਦਿਲਚਸਪ ਬਹੁ-ਭਾਸ਼ਾਈ ਅਨੁਭਵ ਬਣਾ ਸਕਦੇ ਹੋ।