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

Wie es funktioniert

Da die Welt immer globalisierter wird, ist es für Webentwickler zunehmend wichtig, Anwendungen zu erstellen, die Benutzer aus verschiedenen Ländern und Kulturen ansprechen können. Eine der wichtigsten Methoden, dies zu erreichen, ist die Internationalisierung (i18n), die es 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: Vollständiges Beispiel hier ansehen.

Dieser Leitfaden richtet sich an Next.js-Anwendungen, die den Pages Router verwenden.
Wenn Sie den App Router verwenden, sehen Sie sich stattdessen bitte diesen Leitfaden an.

Schritt 1: Installiere eine i18n-Bibliothek

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

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

Lassen Sie uns die Bibliothek mit npm in Ihrem Terminal installieren:

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.

Innerhalb der TacoTranslate-Anwendungsoberfläche erstellen Sie ein Projekt und navigieren zum Tab 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 wird als public bezeichnet und der read/write Schlüssel als secret. Zum Beispiel könnten Sie sie zu einer .env Datei im Stammverzeichnis Ihres Projekts hinzufügen.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Achten Sie darauf, den geheimen read/write API-Schlüssel niemals in produktiven Client-Umgebungen preiszugeben.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Der Standard-Fallback-Sprachcode. In diesem Beispiel setzen wir ihn auf en für Englisch.
• TACOTRANSLATE_ORIGIN: Der „Ordner“, in dem Ihre Strings gespeichert werden, zum Beispiel die URL Ihrer Website. Hier erfahren Sie mehr über Origins.

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

Schritt 3: Einrichtung von TacoTranslate

Um TacoTranslate in Ihre Anwendung zu integrieren, müssen Sie einen Client erstellen, der die zuvor erhaltenen 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 in Kürze automatisch TACOTRANSLATE_API_KEY definieren.

Das Erstellen des Clients in einer separaten Datei erleichtert die spätere Wiederverwendung. 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>
	);
}

Falls Sie bereits benutzerdefinierte pageProps und _app.tsx haben, erweitern Sie bitte die Definition mit den oben genannten Eigenschaften und dem Code.

Schritt 4: Implementierung des Server-Side-Renderings

TacoTranslate ermöglicht die serverseitige Darstellung Ihrer Übersetzungen. Dies verbessert die Benutzererfahrung erheblich, indem sofort übersetzter Inhalt angezeigt wird, anstatt zunächst einen kurzen Moment nicht übersetzten Inhalts zu zeigen. Außerdem können wir Netzwerkanfragen auf der Client-Seite überspringen, 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'),
	});
};

Passen Sie die isProduction Überprüfung an Ihre Umgebung an. Wenn true ist, zeigt TacoTranslate den öffentlichen API-Schlüssel an. 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 werden wir Übersetzungen für alle Ihre Seiten abrufen. Dazu verwenden Sie je nach Ihren Anforderungen entweder getTacoTranslateStaticProps oder getTacoTranslateServerSideProps.

Diese Funktionen nehmen drei Argumente entgegen: Ein Next.js Static Props Context Objekt, die Konfiguration für TacoTranslate und optionale Next.js Eigenschaften. Beachten Sie, dass revalidate bei getTacoTranslateStaticProps standardmäßig auf 60 gesetzt ist, damit Ihre Übersetzungen aktuell bleiben.

Um eine der beiden Funktionen auf einer Seite zu verwenden, nehmen wir an, Sie haben eine Seiten-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 nun in der Lage sein, die Translate Komponente zu verwenden, um Zeichenketten in all 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! Deine Next.js-Anwendung wird jetzt automatisch übersetzt, sobald du beliebige Strings in eine Translate Komponente einfügst. Beachte, dass nur Umgebungen mit read/write Berechtigungen für den API-Schlüssel in der Lage sind, neue Strings zur Übersetzung anzulegen. Wir empfehlen, eine geschlossene und gesicherte Staging-Umgebung einzurichten, in der du deine Produktionsanwendung mit einem solchen API-Schlüssel testen und neue Strings vor dem Live-Gang hinzufügen kannst. So verhinderst du, dass jemand deinen geheimen API-Schlüssel stiehlt und dein Übersetzungsprojekt möglicherweise durch das Hinzufügen neuer, nicht zusammenhängender Strings aufgebläht wird.

Besuchen Sie unbedingt das vollständige Beispiel auf unserem GitHub-Profil. Dort finden Sie auch ein Beispiel, wie Sie dies mit dem App Router machen können! Sollten Sie auf Probleme stoßen, zögern Sie nicht, uns zu kontaktieren, wir helfen Ihnen gerne weiter.

TacoTranslate ermöglicht es Ihnen, Ihre React-Anwendungen automatisch schnell in jede Sprache und aus jeder Sprache zu lokalisieren. Starten Sie noch heute!