சர்வதேசமயமாக்கல்(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. மொழி சார்ந்த உள்ளடக்கத்தை வழங்குவதன் மூலமும், பயனர்கள் மொழிகளை மாற்றுவதற்கும் உதவுவதன் மூலம், உங்கள் பயனர்களுக்கு ஈர்க்கக்கூடிய பன்மொழி அனுபவத்தை உருவாக்கலாம்.