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

Wie es funktioniert

Im Zuge der zunehmenden Globalisierung wird es für Webentwickler immer wichtiger, Anwendungen zu erstellen, die Nutzer aus verschiedenen Ländern und Kulturen ansprechen können. Eine der wichtigsten Methoden, 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 Ihrer React Next.js-Anwendung Internationalisierung mit serverseitigem Rendering hinzufügen können. TL;DR: Das vollständige Beispiel finden Sie hier.

Dieser Leitfaden ist für Next.js-Anwendungen, die den Pages Router verwenden.
Wenn Sie den App Router verwenden, lesen Sie bitte stattdessen diesen Leitfaden.

Schritt 1: Installieren Sie 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 werden wir jedoch TacoTranslate verwenden.

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

Lassen Sie uns das mit npm in Ihrem Terminal installieren:

npm install tacotranslate

Schritt 2: Erstellen Sie ein kostenloses TacoTranslate-Konto

Jetzt, wo Sie das Modul installiert haben, ist es 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 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 hinzufügen.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Stellen Sie sicher, dass Sie den geheimen read/write API-Schlüssel niemals an clientseitige Produktionsumgebungen weitergeben.

Wir werden auch zwei weitere Umgebungsvariablen hinzufügen: TACOTRANSLATE_DEFAULT_LOCALE und TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Der standardmäßige Fallback-Sprachcode. In diesem Beispiel setzen wir ihn auf en für Englisch.
• TACOTRANSLATE_ORIGIN: Der „Ordner“, in dem Ihre Zeichenketten gespeichert werden, wie z. B. die URL Ihrer Website. Lesen Sie hier 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 mit den API-Schlüsseln von zuvor erstellen. Erstellen Sie z. B. 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 den TACOTRANSLATE_API_KEY in Kürze automatisch definieren.

Die Erstellung des Clients in einer separaten Datei erleichtert die spätere Wiederverwendung. Jetzt fügen wir unter Verwendung 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 Code.

Schritt 4: Implementierung des Server-Side Renderings

TacoTranslate ermöglicht das serverseitige Rendern Ihrer Übersetzungen. Dies verbessert die Benutzererfahrung erheblich, da der übersetzte Inhalt sofort angezeigt wird, anstatt zunächst einen kurzen Blitz unübersetzten Inhalts zu zeigen. Außerdem können wir Netzwerk-Anfragen auf dem Client ü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'),
	});
};

Ändern Sie die isProduction Prüfung entsprechend Ihrer Konfiguration. Wenn true, zeigt TacoTranslate den öffentlichen API-Schlüssel an. Wenn wir uns in einer lokalen, Test- oder Staging-Umgebung (isProduction is falsebefinden, verwenden wir den geheimen read/write API-Schlüssel, um sicherzustellen, dass neue Zeichenfolgen zur Übersetzung gesendet werden.

Bisher 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, eine 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! Ihre Next.js-Anwendung wird nun 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 neue Strings zur Übersetzung erstellen können. Wir empfehlen, eine geschlossene und gesicherte Staging-Umgebung zu haben, 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 Ihr Übersetzungsprojekt möglicherweise durch das Hinzufügen neuer, nicht zusammenhängender Strings unnötig aufbläht.

Sehen Sie sich unbedingt das komplette Beispiel in unserem GitHub-Profil an. Dort finden Sie auch ein Beispiel, wie man dies mit dem App Router macht! Sollten Sie auf Probleme stoßen, zögern Sie nicht, uns unter zu kontaktieren, wir helfen Ihnen gerne weiter.

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