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

Da die Welt immer globaler 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 Ihnen ermöglicht, Ihre Anwendung an verschiedene Sprachen, Währungen und Datumsformate anzupassen.

In diesem Tutorial zeigen wir, wie Sie Internationalisierung in Ihre React Next.js-Anwendung mit serverseitigem Rendering integrieren. TL;DR: Sehen Sie sich hier das vollständige Beispiel an.

Diese Anleitung richtet sich an 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 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 verwenden wir jedoch TacoTranslate.

TacoTranslate übersetzt Ihre Strings automatisch mithilfe hochmoderner 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

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 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 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 in clientseitige Produktionsumgebungen gelangt.

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, wie z. B. die URL Ihrer Website. Hier erfahren Sie mehr über Origins.

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 genannten API-Schlüssel verwendet. 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 TACOTRANSLATE_API_KEY in Kürze automatisch definieren.

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

Schritt 4: Implementierung des serverseitigen Renderings

TacoTranslate ermöglicht serverseitiges Rendering Ihrer Übersetzungen. Das verbessert die Benutzererfahrung erheblich, weil übersetzte Inhalte sofort angezeigt werden, anstatt dass zuerst kurz nicht übersetzte Inhalte sichtbar sind. 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'),
	});
};

Passe die isProduction Überprüfung an deine 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.

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 entweder getTacoTranslateStaticProps oder getTacoTranslateServerSideProps je nach Ihren Anforderungen.

Diese Funktionen nehmen drei Argumente entgegen: ein Next.js Static Props Context Objekt, die 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 in 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 nun die Translate Komponente verwenden können, um Zeichenfolgen in allen Ihren React-Komponenten zu übersetzen.

import {Translate} from 'tacotranslate/react';

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

Schritt 5: Bereitstellen und testen!

Geschafft! Ihre React-Anwendung wird jetzt automatisch übersetzt, sobald Sie Strings zu einer Translate Komponente hinzufügen. Bitte beachten Sie, dass nur Umgebungen mit read/write Berechtigungen für den API‑Schlüssel neue Strings erstellen können, 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 vor dem Livegang neue Strings hinzufügen. So verhindern Sie, dass jemand Ihren geheimen API‑Schlüssel stiehlt und dadurch möglicherweise Ihr Übersetzungsprojekt aufbläht, indem neue, nicht verwandte Strings hinzugefügt werden.

Schau dir unbedingt das vollständige Beispiel in unserem GitHub‑Profil an. Dort findest du auch ein Beispiel dafür, wie man das mit dem App Router macht! Wenn du auf Probleme stößt, kontaktiere uns, und wir helfen dir sehr gern weiter.

TacoTranslate ermöglicht es dir, deine React‑Anwendungen automatisch und schnell in mehr als 75 Sprachen zu lokalisieren. Jetzt loslegen!