Internationalisierung (i18n) ist der Prozess des Entwerfens einer Anwendung, die ohne technische Änderungen problemlos an verschiedene Sprachen und Regionen angepasst werden kann. In diesem Artikel erfahren Sie, wie Sie i18n in einer Next.js-Anwendung einrichten und mit next-intl.

Installation

Zuerst müssen Sie die next-intl-Bibliothek installieren, die die Verwaltung der Internationalisierung in Next.js erleichtert. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install next-intl

Projektstruktur

Die Projektstruktur wird wie folgt sein:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. Einrichten von Übersetzungsnachrichten

Erstellen Sie ein Nachrichtenverzeichnis im Stammverzeichnis Ihres Projekts. Fügen Sie in diesem Verzeichnis JSON-Dateien für jede Sprache hinzu, die Sie unterstützen möchten.

message/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

message/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

Diese Dateien enthalten die Übersetzungen der Phrasen, die Ihre Anwendung verwenden wird.

2. Next.js konfigurieren

Konfigurieren Sie Next.js zur Unterstützung der Internationalisierung in next.config.mjs.

next.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

Diese Datei konfiguriert Next.js so, dass die richtigen Übersetzungsnachrichten basierend auf der angeforderten Sprache geladen werden.

3. Internationalisierungs-Middleware

Erstellen Sie Middleware, um die Umleitung zu verwalten und die Standardsprache festzulegen.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Diese Middleware übernimmt die Umleitung zur Standardsprache, wenn keine angegeben ist.

4. Internationalisierungskonfiguration

Erstellen Sie eine Konfigurationsdatei, um die Internationalisierungseinstellungen zu verwalten.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

Diese Datei validiert die Gebietsschemas und lädt die entsprechenden Nachrichten.

5. Layout und Seite einrichten

Konfigurieren Sie das Layout und die Hauptseite, um die Internationalisierung zu unterstützen.

src/app/[locale]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

Diese Dateien konfigurieren das Layout und die Hauptseite für die Verwendung der Übersetzungen.

6. Erstellen des Sprachumschalters

Schließlich erstellen Sie einen Sprachumschalter, um zwischen Englisch und Spanisch umzuschalten.

src/app/[locale]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      EnglishSpanish
  );
}

Mit dieser Komponente können Benutzer die Sprache der Benutzeroberfläche ändern.

Abschluss

Mit diesen Schritten haben Sie die Internationalisierung in Ihrer Next.js-Anwendung erfolgreich eingerichtet und einen Sprachumschalter zum Umschalten zwischen Englisch und Spanisch erstellt. Dadurch kann Ihre Anwendung mehrere Sprachen unterstützen und eine lokalisierte Benutzererfahrung bieten.