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

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), mit der Sie Ihre Anwendung an verschiedene Sprachen, Währungen und Datumsformate anpassen können.

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

Diese Anleitung ist für Next.js-Anwendungen, die den Pages Router verwenden.
Wenn Sie den App Router verwenden, sehen Sie sich stattdessen diese Anleitung an.

Schritt 1: Installieren Sie eine i18n-Bibliothek

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

TacoTranslate übersetzt Ihre Strings automatisch mithilfe hochmoderner KI in jede Sprache 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 in der TacoTranslate-Anwendungsoberfläche ein Projekt und wechseln Sie zum Tab 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 public nennen, und der read/write Schlüssel ist secret. Zum Beispiel können Sie sie in eine .env Datei im Stammverzeichnis Ihres Projekts eintragen.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Stellen Sie sicher, dass Sie den geheimen read/write API-Schlüssel niemals in clientseitigen Produktionsumgebungen offenlegen.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Der Standard-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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Wir werden in Kürze automatisch TACOTRANSLATE_API_KEY definieren.

Das Erstellen des Clients in einer separaten Datei macht es später einfacher, ihn wiederzuverwenden. Jetzt fügen wir mithilfe 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 obenstehenden Code.

Schritt 4: Serverseitiges Rendering implementieren

TacoTranslate ermöglicht das serverseitige Rendern 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 dem Client überspringen, weil 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'),
	});
};

Passe die isProduction Prüfung an deine Umgebung an. Wenn true, wird TacoTranslate den öffentlichen API-Schlüssel anzeigen. Wenn wir uns in einer lokalen, Test- oder Staging-Umgebung (isProduction is false) befinden, verwenden wir den geheimen read/write API-Schlüssel, um sicherzustellen, dass neue Strings 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 auf dem neuesten Stand bleiben.

Um eine der 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 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 React-Anwendung wird jetzt automatisch übersetzt, wenn Sie Zeichenketten zu einer Translate Komponente hinzufügen. Beachten Sie, dass nur Umgebungen mit read/write Berechtigungen für den API‑Schlüssel neue zu übersetzende Zeichenketten erstellen können. Wir empfehlen eine geschlossene und gesicherte Staging‑Umgebung, in der Sie Ihre Produktionsanwendung mit einem solchen API‑Schlüssel testen und neue Zeichenketten hinzufügen können, bevor Sie live gehen. Dadurch wird verhindert, dass jemand Ihren geheimen API‑Schlüssel stiehlt und Ihr Übersetzungsprojekt durch das Hinzufügen neuer, nicht zusammenhängender Zeichenketten unnötig aufbläht.

Schauen Sie sich unbedingt das vollständige Beispiel auf unserem GitHub-Profil an. Dort finden Sie auch ein Beispiel dafür, wie man dies mit dem App Router umsetzt! Wenn Sie auf Probleme stoßen, zögern Sie nicht, uns zu kontaktieren, und wir helfen Ihnen gerne weiter.

TacoTranslate ermöglicht es Ihnen, Ihre React-Anwendungen automatisch und schnell in über 75 Sprachen zu lokalisieren. Jetzt loslegen!