Hvordan implementerer man internationalisering i en Next.js-applikation, der bruger Pages Router?

Efterhånden som verden bliver mere globaliseret, bliver det derfor også mere og mere vigtigt for webudviklere at bygge applikationer, der kan imødekomme brugere fra forskellige lande og kulturer. En af hovedmåderne at opnå dette på er gennem internationalisering (i18n), som gør det muligt at tilpasse din applikation til forskellige sprog, valutaer og datoformater.

I denne vejledning vil vi udforske, hvordan du tilføjer internationalisering til din React Next.js-applikation med server side rendering. TL;DR: Se det komplette eksempel her.

Denne vejledning er til Next.js-applikationer, der bruger Pages Router.
Hvis du bruger App Router, se venligst denne vejledning i stedet.

Trin 1: Installer et i18n-bibliotek

For at implementere internationalisering i din Next.js-applikation, vil vi først vælge et i18n-bibliotek. Der findes flere populære biblioteker, inklusive next-intl. I dette eksempel vil vi dog bruge TacoTranslate.

TacoTranslate oversætter automatisk dine strenge til ethvert sprog ved hjælp af avanceret AI og frigør dig fra det tidskrævende arbejde med at administrere JSON-filer.

Lad os installere det ved hjælp af npm i din terminal:

npm install tacotranslate

Trin 2: Opret en gratis TacoTranslate-konto

Nu hvor du har installeret modulet, er det tid til at oprette din TacoTranslate-konto, et oversættelsesprojekt og tilknyttede API-nøgler. Opret en konto her. Det er gratis, og kræver ikke, at du tilføjer et kreditkort.

Inden for TacoTranslate applikationens brugerflade, opret et projekt, og naviger til fanen for dets API-nøgler. Opret én read nøgle og én read/write nøgle. Vi gemmer dem som miljøvariabler. read nøglen er det, vi kalder public, og read/write nøglen er secret. For eksempel kan du tilføje dem til en .env fil i roden af dit projekt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sørg for aldrig at lække den hemmelige read/write API-nøgle til klient-siden i produktionsmiljøer.

Vi vil også tilføje to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-sprogkode. I dette eksempel sætter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Den "mappe", hvor dine tekststrenge vil blive gemt, såsom URL'en på dit websted. Læs mere om origins her.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Trin 3: Opsætning af TacoTranslate

For at integrere TacoTranslate med din applikation, skal du oprette en klient ved at bruge API-nøglerne fra tidligere. Opret for eksempel en fil med navnet /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;

Vi vil snart automatisk definere TACOTRANSLATE_API_KEY.

At oprette klienten i en separat fil gør det nemmere at genbruge senere. Nu, ved at bruge en tilpasset /pages/_app.tsx, vil vi tilføje TacoTranslate provideren.

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>
	);
}

Hvis du allerede har tilpassede pageProps og _app.tsx, bedes du udvide definitionen med egenskaberne og koden fra ovenstående.

Trin 4: Implementering af server-side rendering

TacoTranslate tillader server-side rendering af dine oversættelser. Dette forbedrer brugeroplevelsen markant ved straks at vise oversat indhold i stedet for først at vise et glimt af uoversat indhold. Derudover kan vi springe netværksforespørgsler over på klienten, fordi vi allerede har alle de oversættelser, vi har brug for.

Vi starter med at oprette eller ændre /next.config.js.

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'),
	});
};

Tilpas isProduction tjekket til din opsætning. Hvis true, vil TacoTranslate gøre den offentlige API-nøgle tilgængelig. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction is false), vil vi bruge den hemmelige read/write API-nøgle for at sikre, at nye strenge sendes til oversættelse.

Indtil nu har vi kun konfigureret Next.js-applikationen med en liste over understøttede sprog. Næste skridt er at hente oversættelser til alle dine sider. Til det vil du bruge enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps afhængigt af dine behov.

Disse funktioner tager tre argumenter: Et Next.js Static Props Context objekt, konfiguration for TacoTranslate og valgfrie Next.js egenskaber. Bemærk, at revalidate på getTacoTranslateStaticProps som standard er sat til 60, så dine oversættelser forbliver opdaterede.

For at bruge en af funktionerne i en side, lad os antage, at du har en sidefil som /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!"/>;
}

Du bør nu kunne bruge Translate komponenten til at oversætte tekststrenge i alle dine React-komponenter.

import {Translate} from 'tacotranslate/react';

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

Trin 5: Udrul og test!

Vi er færdige! Din React-applikation vil nu blive oversat automatisk, når du tilføjer enhver tekststreng til en Translate komponent. Bemærk, at kun miljøer med read/write tilladelser på API-nøglen vil være i stand til at oprette nye tekststrenge til oversættelse. Vi anbefaler at have et lukket og sikret staging-miljø, hvor du kan teste din produktionsapplikation med en API-nøgle som denne og tilføje nye tekststrenge, før du går live. Dette vil forhindre, at nogen stjæler din hemmelige API-nøgle og potentielt fylder dit oversættelsesprojekt med nye, ikke-relaterede tekststrenge.

Vær sikker på at tjekke det komplette eksempel på vores GitHub-profil. Der finder du også et eksempel på, hvordan du gør dette ved brug af App Router! Hvis du støder på problemer, er du velkommen til at kontakte os, og vi hjælper dig gerne.

TacoTranslate lader dig automatisk lokalisere dine React-applikationer hurtigt til og fra alle sprog. Kom i gang i dag!