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 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: Hier finden Sie das vollständige Beispiel.

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

Schritt 1: Installiere eine i18n-Bibliothek

Um Internationalisierung in deiner 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 deine Strings automatisch mit modernster KI in jede Sprache und befreit dich von der mühsamen Verwaltung von JSON-Dateien.

Lass uns das mit npm in deinem Terminal installieren:

npm install tacotranslate

Schritt 2: Erstellen Sie ein kostenloses TacoTranslate-Konto

Jetzt, wo du das Modul installiert hast, ist es Zeit, dein TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API-Schlüssel zu erstellen. Hier ein Konto erstellen. Es ist kostenlos und du musst keine Kreditkarte angeben.

Erstellen Sie innerhalb der TacoTranslate-Anwendungsoberfläche ein Projekt und navigieren Sie 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önnen Sie sie in eine .env Datei im Stammverzeichnis Ihres Projekts hinzufügen.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Stellen Sie sicher, dass der geheime read/write API-Schlüssel niemals an Produktionsumgebungen auf der Client-Seite weitergegeben wird.

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 Strings gespeichert werden, z. B. 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 mit den zuvor genannten API-Schlüsseln erstellen. Erstellen Sie beispielsweise 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.

Die Erstellung des Clients in einer separaten Datei erleichtert die spätere Wiederverwendung. Nun 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 mit den oben genannten Eigenschaften und dem Code.

Schritt 4: Implementierung des Server-Side Renderings

TacoTranslate ermöglicht das serverseitige Rendering Ihrer Übersetzungen. Dies verbessert die Benutzererfahrung erheblich, indem sofort übersetzte Inhalte angezeigt werden, anstatt zunächst einen kurzen Moment nicht übersetzter Inhalte. Darüber hinaus können wir Netzwerkaufrufe auf der Client-Seite überspringen, da wir bereits alle benötigten Übersetzungen vorliegen haben.

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

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 Prü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: 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 in einer Seite zu verwenden, gehen wir davon aus, dass Sie eine Seiten-Datei wie /pages/hello-world.tsx haben.

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

Stellen Sie sicher, dass Sie sich das komplette Beispiel in unserem GitHub-Profil ansehen. Dort finden Sie auch ein Beispiel, wie Sie dies mit dem App Router machen können! Wenn 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 mehr als 75 Sprachen zu lokalisieren. Starten Sie noch heute!