M

MLOG

Deutsch

Lernen Sie, wie Sie eine nahtlose Internationalisierung (i18n) in Ihren Next.js-Anwendungen implementieren, um ein globales Publikum zu erreichen. Behandelt Routing, Inhaltsübersetzung und Best Practices.

Next.js-Internationalisierung: Mehrsprachige Apps für ein globales Publikum erstellen

In der heutigen vernetzten Welt ist die Entwicklung von Anwendungen, die sich an ein globales Publikum richten, kein Luxus mehr – es ist eine Notwendigkeit. Next.js, ein leistungsstarkes React-Framework, bietet robuste Funktionen zur Implementierung von Internationalisierung (i18n), mit denen Sie mehrsprachige Anwendungen erstellen können, die Benutzern weltweit ein lokalisiertes Erlebnis bieten. Dieser umfassende Leitfaden führt Sie durch die wesentlichen Konzepte, Techniken und Best Practices für die Erstellung internationalisierter Next.js-Anwendungen.

Internationalisierung und Lokalisierung verstehen

Bevor wir uns mit den Besonderheiten von Next.js i18n befassen, wollen wir die Schlüsselbegriffe klären:

Im Wesentlichen bereitet i18n Ihre Anwendung auf die Lokalisierung vor. Indem Sie sprachabhängige Elemente vom Kerncode trennen, erleichtern Sie die Lokalisierung der Anwendung für verschiedene Märkte.

Warum Internationalisierung in Next.js implementieren?

Die Implementierung von i18n in Ihrer Next.js-Anwendung bietet zahlreiche Vorteile:

Next.js i18n-Funktionen und Konfiguration

Next.js bietet integrierte Unterstützung für i18n durch seine Routing- und Content-Management-Funktionen. Im Folgenden finden Sie eine Aufschlüsselung der wichtigen Funktionen:

1. Konfiguration von i18n in next.config.js

Die Kernkonfiguration für i18n befindet sich in der Datei next.config.js. Hier ist ein Beispiel:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Ein Array der unterstützten Locales (Sprachcodes)
    defaultLocale: 'en', // Das zu verwendende Standard-Locale
    localeDetection: true, // Automatische Locale-Erkennung basierend auf den Browsereinstellungen aktivieren/deaktivieren (optional)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Erklärung:

2. Routing mit Locale-Präfixen

Next.js versieht Routen automatisch mit dem Locale-Präfix. Wenn Sie beispielsweise eine Seite unter /about haben und das Locale 'es' (Spanisch) ist, wird die URL zu /es/about. Dies ermöglicht verschiedene Sprachversionen von Seiten und befähigt Suchmaschinen, Inhalte für jedes Locale zu indizieren. Das Framework übernimmt die Weiterleitung und das Routing für Sie.

3. Verwendung des useRouter-Hooks

Der useRouter-Hook aus next/router bietet Zugriff auf das aktuelle Locale und andere Routing-Informationen.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Aktuelles Locale: {locale}

      
Verfügbare Locales: {locales.join(', ')}

      
Standard-Locale: {defaultLocale}

    

  );
}

export default MyComponent;

Das router-Objekt bietet die folgenden Schlüsseleigenschaften:

Strategien zur Inhaltsübersetzung

Sobald Sie Ihre Next.js-Anwendung für i18n konfiguriert haben, müssen Sie Strategien zur Übersetzung Ihrer Inhalte implementieren. Hier sind einige beliebte Ansätze:

1. Verwendung eines dedizierten Übersetzungsmanagementsystems (TMS)

Für große Projekte mit vielen Sprachen wird ein TMS dringend empfohlen. Beliebte Optionen sind:

Vorteile:

2. Erstellen von JSON-Übersetzungsdateien

Für kleinere Projekte ist die Verwendung von JSON-Dateien zur Speicherung von Übersetzungen eine einfache und effektive Methode.

Beispiel-Verzeichnisstruktur:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Beispiel en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Beispiel es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Beispiel MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Dieser Ansatz bietet Flexibilität und ist für kleinere Projekte unkompliziert. Er ist im Allgemeinen leicht zu aktualisieren und zu pflegen.

3. Verwendung einer Übersetzungsbibliothek

Mehrere JavaScript-Bibliotheken optimieren die Inhaltsübersetzung innerhalb Ihrer React-Komponenten.

Beispiel mit next-i18next (Installation: npm install next-i18next i18next react-i18next):

Erstellen Sie eine i18n-Konfigurationsdatei (z. B. i18n.js in Ihrem Stammverzeichnis):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Erstellen Sie Ihre Next.js-Konfiguration für next-i18next.


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

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // other configuration
}

module.exports = nextConfig

Fügen Sie die Konfiguration und den Übersetzungsimport zu Ihrer _app.js hinzu:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Erstellen Sie einen Ordner und füllen Sie ihn mit den Locales für Ihre Übersetzungen.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Beispiel en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Verwendung der Übersetzung in einer Komponente:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Dieses Beispiel verwendet den useTranslation-Hook, um Übersetzungen basierend auf dem aktuellen Locale abzurufen.

Umgang mit dynamischen Routen und statischer Seitengenerierung (SSG)

Die Internationalisierung wird komplexer, wenn es um dynamische Routen (z. B. Blogbeiträge, Produktseiten) und statische Seitengenerierung (SSG) geht.

1. Dynamische Routen (z. B. /blog/[slug])

Für dynamische Routen müssen Sie zur Build-Zeit mit getStaticPaths die korrekten Pfade für jedes Locale generieren. Diese Funktion gibt ein Array von Pfaden zurück, die Next.js vorab rendern soll.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Blogbeitragsdaten abrufen

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // oder 'blocking', wenn Sie einen Ladezustand anzeigen möchten
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Erklärung:

2. Statische Seitengenerierung (SSG) mit getStaticProps

In getStaticProps können Sie übersetzte Inhalte basierend auf dem locale-Parameter abrufen.


export async function getStaticProps({ params, locale }) {
  // Inhalt basierend auf Locale und Parametern abrufen
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Die Funktion getPostBySlug sollte den übersetzten Inhalt für den gegebenen Slug und das Locale abrufen, der aus Ihren Übersetzungsdateien, einer Datenbank oder einem CMS stammen könnte.

3. Serverseitiges Rendern (SSR) mit getServerSideProps

Für Inhalte, die zur Anfragezeit abgerufen werden müssen, verwenden Sie getServerSideProps. Dies ist nützlich, wenn sich der Inhalt häufig ändert oder für jeden Benutzer personalisiert ist.


export async function getServerSideProps({ params, locale, req, res }) {
  // Daten basierend auf Locale und Parametern abrufen (z. B. aus einer Datenbank)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Best Practices für die Next.js-Internationalisierung

Die Befolgung dieser Best Practices wird Ihnen helfen, robuste, wartbare und benutzerfreundliche mehrsprachige Anwendungen zu erstellen:

SEO-Überlegungen für internationalisierte Websites

Die Optimierung Ihrer internationalisierten Website für Suchmaschinen ist entscheidend, um organischen Traffic aus der ganzen Welt zu generieren. Hier sind einige wichtige SEO-Best-Practices:

Beispiel: Erstellung eines einfachen mehrsprachigen Blogs

Lassen Sie uns ein vereinfachtes Beispiel eines mehrsprachigen Blogs mit Next.js erstellen. Dies wird eine konkretere Veranschaulichung der oben diskutierten Konzepte bieten.

1. Projekteinrichtung

Erstellen Sie ein neues Next.js-Projekt:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. i18n konfigurieren (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Übersetzungsdateien erstellen

Erstellen Sie einen locales-Ordner im Stammverzeichnis und fügen Sie die folgenden JSON-Dateien hinzu:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Die Blog-Beitrag-Komponente erstellen (z. B. components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Die Index-Seite erstellen (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Dieses vereinfachte Beispiel zeigt die grundlegenden Prinzipien der Next.js-Internationalisierung. Sie können dieses grundlegende Framework erweitern, um komplexere Funktionen wie dynamische Routen und die Integration mit Übersetzungsmanagementsystemen einzubeziehen. Erwägen Sie, die obigen Links mit der Link-Komponente zu verbessern und das entsprechende locale-Attribut hinzuzufügen.

6. Die Anwendung ausführen

Führen Sie die Anwendung aus mit:


npm run dev

Jetzt können Sie auf Ihren Blog unter http://localhost:3000 (Englisch), http://localhost:3000/es (Spanisch) und http://localhost:3000/fr (Französisch) zugreifen. Sie sollten sehen, wie der Titel und der Inhalt des Blogbeitrags je nach ausgewähltem Locale übersetzt werden.

Fazit

Next.js bietet ein umfassendes Set an Funktionen zur Implementierung der Internationalisierung in Ihren Webanwendungen. Indem Sie die in diesem Leitfaden beschriebenen Prinzipien und Techniken befolgen, können Sie mehrsprachige Anwendungen erstellen, die Benutzern auf der ganzen Welt lokalisierte Erlebnisse bieten. Denken Sie daran, Ihre i18n-Strategie frühzeitig zu planen, die richtige Übersetzungsmethode für Ihre Bedürfnisse zu wählen und die Benutzererfahrung zu priorisieren. Mit sorgfältiger Planung und Ausführung können Sie Anwendungen erstellen, die bei einem globalen Publikum Anklang finden und neue Wachstumschancen erschließen. Kontinuierliches Lernen und das Verfolgen der neuesten Versionen und Best Practices stellen sicher, dass Sie Ihre Werkzeuge und Technologien effektiv einsetzen.

Mit dem technologischen Fortschritt ist zu erwarten, dass fortschrittlichere i18n-Funktionen aufkommen werden. Die Fähigkeit, Benutzer über verschiedene Kulturen und Sprachgruppen hinweg zu erreichen, wird für Anwendungsentwickler weltweit eine zentrale Priorität bleiben. Daher ist die Beherrschung der Grundlagen von i18n eine wertvolle Fähigkeit, die Ihren Wert in der heutigen globalen Entwicklungslandschaft steigern wird.

Next.js-Internationalisierung: Mehrsprachige Apps für ein globales Publikum erstellen | MLOG