Εφαρμογή Διεθνοποίησης(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>  
 );  
}  

συμπέρασμα

Αυτή η ενότητα σάς εισήγαγε στη διαδικασία εφαρμογής της Διεθνοποίησης(i18n) στην Next.js εφαρμογή σας χρησιμοποιώντας τη next-i18next βιβλιοθήκη. Παρέχοντας περιεχόμενο για συγκεκριμένη γλώσσα και δίνοντας τη δυνατότητα στους χρήστες να αλλάζουν γλώσσα, μπορείτε να δημιουργήσετε μια συναρπαστική πολυγλωσσική εμπειρία για τους χρήστες σας.