Die beste Lösung für Internationalisierung (i18n) in Next.js-Apps

Wie es funktioniert

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

In diesem Tutorial zeigen wir, wie Sie Internationalisierung zu Ihrer React Next.js-Anwendung mit Server-Side-Rendering hinzufügen. TL;DR: Siehe das vollständige Beispiel hier.

Diese Anleitung gilt für Next.js-Anwendungen, die den Pages Router verwenden.
Wenn Sie den App Router verwenden, lesen Sie stattdessen diese Anleitung.

Schritt 1: Installieren Sie eine i18n-Bibliothek

Um die 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 Strings automatisch mithilfe modernster KI in jede Sprache und erspart Ihnen die mühsame 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 Zeit, Ihr TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API-Schlüssel anzulegen. Hier ein Konto erstellen. Es ist kostenlos und erfordert keine Angabe einer Kreditkarte.

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

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 erstellen, der die zuvor erstellten API-Schlüssel verwendet. Erstellen Sie zum Beispiel eine Datei mit dem Namen /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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Wir werden TACOTRANSLATE_API_KEY in Kürze automatisch definieren.

Den Client in einer separaten Datei zu erstellen, macht es später einfacher, ihn wiederzuverwenden. Nun fügen wir mit einer benutzerdefinierten /pages/_app.tsx den TacoTranslate Provider hinzu.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Wenn Sie bereits benutzerdefinierte pageProps und _app.tsx haben, erweitern Sie bitte die Definition um die oben genannten Eigenschaften und den oben gezeigten Code.

Schritt 4: Implementierung des serverseitigen Renderings

TacoTranslate ermöglicht das serverseitige Rendering Ihrer Übersetzungen. Das verbessert die Benutzererfahrung erheblich, da übersetzte Inhalte sofort angezeigt werden, anstatt dass zuerst ein kurzes Aufblitzen nicht übersetzter Inhalte zu sehen ist. Außerdem können wir Netzwerkaufrufe auf der Client-Seite vermeiden, da wir bereits alle benötigten Übersetzungen haben.

Wir beginnen damit, /next.config.js zu erstellen oder zu ändern.

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

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Ändern Sie die isProduction‑Prüfung so, dass sie zu Ihrer Konfiguration passt. Wenn true, stellt TacoTranslate den öffentlichen API‑Schlüssel bereit. Befinden wir uns in einer lokalen, Test‑ oder Staging‑Umgebung (isProduction is false), verwenden wir den geheimen read/write API‑Schlüssel, um sicherzustellen, dass neue Strings zur Übersetzung gesendet werden.

Bis jetzt haben wir die Next.js-Anwendung nur mit einer Liste unterstützter Sprachen eingerichtet. Als Nächstes rufen wir die Übersetzungen für alle Ihre Seiten ab. Dazu verwenden Sie entweder getTacoTranslateStaticProps oder getTacoTranslateServerSideProps je nach Ihren Anforderungen.

Diese Funktionen nehmen drei Argumente entgegen: ein Next.js Static Props Context Objekt, eine Konfiguration für TacoTranslate und optionale Next.js-Eigenschaften. Beachte, dass revalidate bei getTacoTranslateStaticProps standardmäßig auf 60 gesetzt ist, damit deine Übersetzungen auf dem neuesten Stand bleiben.

Um eine der beiden Funktionen auf einer Seite zu verwenden, nehmen wir an, du hast eine Datei wie /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

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

Sie sollten jetzt in der Lage sein, die Translate Komponente zu verwenden, um Zeichenketten in allen Ihren React-Komponenten zu übersetzen.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Schritt 5: Bereitstellen und testen!

Wir sind fertig! Ihre Next.js-Anwendung wird jetzt automatisch übersetzt, wenn Sie Strings zu einer Translate Komponente hinzufügen. Beachten Sie, dass nur Umgebungen mit read/write Berechtigungen für den API-Schlüssel in der Lage sein werden, neue Strings zu erstellen, die übersetzt werden sollen. 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. So verhindern Sie, dass jemand Ihren geheimen API‑Schlüssel stiehlt und dadurch 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 App 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!