Wie man Internationalisierung in einer Next.js-Anwendung implementiert, die den Pages Router verwendet
Machen Sie Ihre React-Anwendung zugänglicher und erschließen Sie neue Märkte mit Internationalisierung (i18n).
Da die Welt immer globalisierter 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 Möglichkeiten, 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 werden wir untersuchen, wie man Internationalisierung zu Ihrer React Next.js-Anwendung mit serverseitigem Rendering hinzufügt. TL;DR: Siehe das vollständige Beispiel hier.
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: Installiere 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 verwenden wir jedoch TacoTranslate.
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 dies 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 an der Zeit, Ihr TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API-Schlüssel zu erstellen. Hier ein Konto erstellen. 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 wird als public
bezeichnet und der read/write
Schlüssel ist secret
. Zum Beispiel könnten Sie diese 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 in Client-seitige Produktionsumgebungen gelangt.
Wir fügen außerdem zwei weitere Umgebungsvariablen hinzu: TACOTRANSLATE_DEFAULT_LOCALE
und TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Der standardmäßige Fallback-Sprachcode. In diesem Beispiel setzen wir ihn aufen
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
Um TacoTranslate in Ihre Anwendung zu integrieren, müssen Sie einen Client mit den zuvor erhaltenen API-Schlüsseln erstellen. Erstellen Sie beispielsweise 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 gleich automatisch TACOTRANSLATE_API_KEY
definieren.
Die Erstellung des Clients in einer separaten Datei macht es einfacher, ihn später erneut zu verwenden. Nun fügen wir mit 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
besitzen, erweitern Sie bitte die Definition mit den oben genannten Eigenschaften und dem Code.
Schritt 4: Implementierung des Server-Side Rendering
TacoTranslate ermöglicht die serverseitige Darstellung (Server Side Rendering) Ihrer Übersetzungen. Dies verbessert die Benutzererfahrung erheblich, indem sofort übersetzte Inhalte angezeigt werden, anstatt zuerst einen kurzen Moment nicht übersetzter Inhalte zu sehen. Zusätzlich 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 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 holen wir die Übersetzungen für alle deine Seiten. Dazu verwendest du entweder getTacoTranslateStaticProps
oder getTacoTranslateServerSideProps
, je nach deinen Anforderungen.
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 in 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 React-Anwendung wird nun 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 einzurichten, in der Sie Ihre Produktionsanwendung mit einem solchen API-Schlüssel testen und neue Zeichenketten 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 Zeichenketten aufbläht.
Achten Sie darauf, das vollständige Beispiel auf unserem GitHub-Profil anzusehen. Dort finden Sie auch ein Beispiel, wie Sie dies mit dem App Router umsetzen 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 jede Sprache und aus jeder Sprache zu lokalisieren. Starten Sie noch heute!