Implementierung der Internationalisierung(i18n) in Next.js: Mehrsprachig

In diesem Abschnitt führen wir Sie durch den Prozess der Implementierung der Internationalisierung(i18n) in Ihrer Next.js Bewerbung. Mit i18n können Sie ein mehrsprachiges Erlebnis für Benutzer schaffen und sprachspezifische Inhalte bereitstellen.

Nutzung der next-i18next Bibliothek

next-i18next ist eine beliebte Bibliothek zur Implementierung von i18n in Next.js Anwendungen. So können Sie i18n zu Ihrer Anwendung hinzufügen:

Installieren next-i18next:

npm install next-i18next

Konfigurieren Sie die Bibliothek in Ihrer next.config.js Datei:

const { i18n } = require('./next-i18next.config');  
  
module.exports = {  
  i18n,  
};  

Erstellen Sie eine Konfigurationsdatei mit dem Namen next-i18next.config.js:

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};  

Verwenden Sie die Bibliothek in Ihrer Anwendung:

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}  

Mehrsprachige Inhalte erstellen

Nach der Installation next-i18next können Sie Sprachdateien wie en.json, erstellen fr.json, es.json um Inhalte in jeder Sprache bereitzustellen:

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}  

Sprachumschaltung

Um die Sprachumschaltung zu ermöglichen, können Sie ein Sprachumschalttool erstellen und die i18n.changeLanguage Funktion verwenden:

 

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>  
 );  
}  

Abschluss

In diesem Abschnitt haben Sie den Prozess der Implementierung der Internationalisierung(i18n) in Ihrer Next.js Anwendung mithilfe der next-i18next Bibliothek kennengelernt. Durch die Bereitstellung sprachspezifischer Inhalte und die Möglichkeit für Benutzer, die Sprache zu wechseln, können Sie Ihren Benutzern ein ansprechendes mehrsprachiges Erlebnis bieten.