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

Da die Welt immer globaler wird, wird 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 Internationalisierung in Ihre React Next.js-Anwendung mit serverseitigem Rendering integrieren können. TL;DR: Sehen Sie sich hier das vollständige Beispiel an.

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: Eine i18n-Bibliothek installieren

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 das 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 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 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 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 hinzufügen.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Stellen Sie sicher, dass der geheime read/write API-Schlüssel niemals in clientseitigen Produktionsumgebungen offengelegt wird.

Wir werden auch zwei weitere Umgebungsvariablen hinzufügen: 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 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 erleichtert die spätere Wiederverwendung. Nun 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 Code.

Schritt 4: Implementierung des Server-Side Renderings

TacoTranslate ermöglicht das serverseitige Rendering Ihrer Übersetzungen. Dies verbessert die Benutzererfahrung erheblich, indem übersetzte Inhalte sofort angezeigt werden, anstatt zuerst einen kurzen Moment lang unübersetzte Inhalte zu zeigen. Außerdem können wir Netzwerk-Anfragen auf der Client-Seite überspringen, da wir bereits alle benötigten Übersetzungen 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 Prüfung isProduction an Ihre Umgebung an. Wenn true ist, zeigt TacoTranslate den öffentlichen API-Schlüssel an. Wenn wir uns in einer lokalen, Test- oder Staging-Umgebung befinden (isProduction is false), verwenden wir den geheimen read/write API-Schlüssel, um sicherzustellen, dass neue Strings zur Übersetzung gesendet werden.

Bisher haben wir nur die Next.js Anwendung mit einer Liste der unterstützten Sprachen eingerichtet. Als nächstes holen wir Übersetzungen für alle Ihre Seiten. Zu diesem Zweck verwenden Sie je nach Ihren Anforderungen entweder getTacoTranslateStaticProps oder getTacoTranslateServerSideProps .

Diese Funktionen benötigen drei Argumente: Ein Next.js Static Props Context Objekt, die Konfiguration für TacoTranslate und optionale Next.js Eigenschaften. Beachten Sie, dass revalidate auf getTacoTranslateStaticProps standardmäßig auf 60 eingestellt ist, damit Ihre Übersetzungen auf dem neuesten Stand bleiben.

Um eine der beiden Funktionen auf einer Seite zu verwenden, nehmen wir an, dass Sie eine Auslagerungsdatei wie /pages/hello-world.tsxhaben.

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 React-Anwendung wird nun automatisch übersetzt, wenn du beliebige Strings zu einer Translate Komponente hinzufügst. Beachte, 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 du deine Produktionsanwendung mit einem solchen API-Schlüssel testen kannst und neue Strings vor dem Live-Gang hinzufügst. Dies verhindert, dass jemand deinen geheimen API-Schlüssel stiehlt und dein Übersetzungsprojekt durch das Hinzufügen neuer, nicht zusammenhängender Strings unnötig aufbläht.

Sehen Sie sich unbedingt das vollständige Beispiel in unserem GitHub-Profil an. 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 schnell und automatisch in jede Sprache und aus jeder Sprache zu lokalisieren. Starten Sie noch heute!