Wie man Internationalisierung in einer Next.js-Anwendung implementiert, die den App Router verwendet

Da die Welt immer globalisierter wird, ist es für Webentwickler zunehmend wichtig, Anwendungen zu erstellen, die Nutzer aus verschiedenen Ländern und Kulturen bedienen können. Eine der wichtigsten Möglichkeiten, dies zu erreichen, ist Internationalisierung (i18n), die es Ihnen ermöglicht, Ihre Anwendung an verschiedene Sprachen, Währungen und Datumsformate anzupassen.

In diesem Artikel zeigen wir, wie Sie Internationalisierung in Ihre React Next.js-Anwendung mit serverseitigem Rendering integrieren. TL;DR: Hier finden Sie das vollständige Beispiel.

Diese Anleitung richtet sich an Next.js-Anwendungen, die den App Router verwenden.
Wenn Sie den Pages Router verwenden, lesen Sie stattdessen diese Anleitung.

Schritt 1: Installieren Sie eine i18n-Bibliothek

Um Internationalisierung in Ihrer Next.js-Anwendung zu implementieren, wählen wir zunächst eine i18n-Bibliothek. Es gibt mehrere beliebte Bibliotheken, darunter next-intl. In diesem Beispiel werden wir jedoch TacoTranslate.

TacoTranslate übersetzt Ihre Texte automatisch in jede Sprache mithilfe modernster KI und befreit Sie von der mühsamen Verwaltung von JSON-Dateien.

Installieren wir es mit npm in Ihrem Terminal:

npm install tacotranslate

Schritt 2: Erstellen Sie ein kostenloses TacoTranslate-Konto

Jetzt, da Sie das Modul installiert haben, ist es an der Zeit, Ihr TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API‑Schlüssel zu erstellen. Erstellen Sie hier ein Konto. Es ist kostenlos und erfordert keine Angabe einer Kreditkarte.

Erstellen Sie innerhalb der TacoTranslate-Anwendungsoberfläche ein Projekt und navigieren Sie zur Registerkarte für API‑Schlüssel. Erstellen Sie einen read Schlüssel und einen read/write Schlüssel. Wir speichern sie als Umgebungsvariablen. Der read Schlüssel ist das, was wir als public bezeichnen, und der read/write Schlüssel ist secret. Zum Beispiel könnten Sie sie in eine .env Datei im Stammverzeichnis Ihres Projekts hinzufügen.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Stellen Sie sicher, dass der geheime read/write API-Schlüssel niemals an clientseitige Produktionsumgebungen weitergegeben wird.

Wir fügen außerdem zwei weitere Umgebungsvariablen hinzu: TACOTRANSLATE_DEFAULT_LOCALE und TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Der standardmäßige Fallback‑Locale‑Code. In diesem Beispiel setzen wir ihn auf en für Englisch.
• TACOTRANSLATE_ORIGIN: Der „Ordner“, in dem Ihre Strings gespeichert werden, z. B. die URL Ihrer Website. Weitere Informationen zu Origins finden Sie hier.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Schritt 3: TacoTranslate einrichten

Um TacoTranslate in Ihre Anwendung zu integrieren, müssen Sie einen Client mit den zuvor erstellten API‑Schlüsseln anlegen. Erstellen Sie zum Beispiel eine Datei namens /tacotranslate-client.js.

const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY,
	projectLocale:
		process.env.TACOTRANSLATE_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Wir werden TACOTRANSLATE_API_KEY und TACOTRANSLATE_PROJECT_LOCALE in Kürze automatisch definieren.

Das Erstellen des Clients in einer separaten Datei macht es einfach, ihn später wiederzuverwenden. getLocales ist nur eine Hilfsfunktion mit eingebauter Fehlerbehandlung. Erstelle nun eine Datei mit dem Namen /app/[locale]/tacotranslate.tsx, in der wir den TacoTranslate Provider implementieren.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Beachte die 'use client';, die anzeigt, dass es sich hierbei um eine Client-Komponente handelt.

Da der Context-Provider nun einsatzbereit ist, erstellen Sie eine Datei mit dem Namen /app/[locale]/layout.tsx, dem Root-Layout unserer Anwendung. Beachten Sie, dass dieser Pfad einen Ordner enthält, der Dynamic Routes nutzt, wobei [locale] der dynamische Parameter ist.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Das Erste, das es hier zu beachten gilt, ist, dass wir unseren Dynamic Route Parameter [locale] verwenden, um Übersetzungen für diese Sprache abzurufen. Zusätzlich sorgt generateStaticParams dafür, dass alle Locale-Codes, die Sie für Ihr Projekt aktiviert haben, vorgerendert werden.

Jetzt erstellen wir unsere erste Seite! Erstelle eine Datei namens /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Beachte die revalidate Variable, die Next.js anweist, die Seite nach 60 Sekunden neu zu erstellen und deine Übersetzungen auf dem neuesten Stand zu halten.

Schritt 4: Implementierung des serverseitigen Renderings

TacoTranslate unterstützt serverseitiges Rendering. Das verbessert die Benutzererfahrung erheblich, da übersetzte Inhalte sofort angezeigt werden, anstatt dass zunächst ein kurzes Aufblitzen nicht übersetzter Inhalte zu sehen ist. Außerdem können wir client-seitige Netzwerkanfragen vermeiden, weil wir bereits die Übersetzungen für die Seite haben, die der Benutzer gerade ansieht.

Um Server-Side-Rendering einzurichten, erstellen oder bearbeiten Sie /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			client: tacoTranslateClient,
			isProduction:
				process.env.TACOTRANSLATE_ENV === 'production' ||
				process.env.VERCEL_ENV === 'production' ||
				(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
					process.env.NODE_ENV === 'production'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Ändere die Prüfung isProduction so, dass sie zu deiner Konfiguration passt. Wenn true, wird TacoTranslate den öffentlichen API-Schlüssel anzeigen. Befinden wir uns in einer lokalen, Test- oder Staging-Umgebung (isProduction is false), verwenden wir den geheimen read/write API-Schlüssel, damit neue Strings zur Übersetzung gesendet werden.

Um sicherzustellen, dass Routing und Weiterleitungen wie erwartet funktionieren, müssen wir eine Datei namens /middleware.ts erstellen. Mit Middleware können wir Benutzer auf Seiten weiterleiten, die in ihrer bevorzugten Sprache angezeigt werden.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Stellen Sie sicher, dass Sie den matcher gemäß der Next.js-Middleware-Dokumentation einrichten.

Auf dem Client können Sie das locale Cookie ändern, um die bevorzugte Sprache des Benutzers zu ändern. Bitte sehen Sie sich für Ideen den vollständigen Beispielcode an!

Schritt 5: Bereitstellen und testen!

Fertig! Ihre React-Anwendung wird nun automatisch übersetzt, sobald Sie beliebige Strings zu einer Translate Komponente hinzufügen. Beachten Sie, dass nur Umgebungen mit read/write Berechtigungen für den API-Schlüssel neue zu übersetzende Strings erstellen können. Wir empfehlen, eine geschlossene und gesicherte Staging‑Umgebung einzurichten, in der Sie Ihre Produktionsanwendung mit einem solchen API‑Schlüssel testen und neue Strings hinzufügen können, bevor Sie live gehen. Dadurch wird verhindert, dass jemand Ihren geheimen API‑Schlüssel stiehlt und möglicherweise Ihr Übersetzungsprojekt durch das Hinzufügen neuer, nicht verwandter Strings aufbläht.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!