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

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

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

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

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, herunder next-intl. I dette eksempel vil vi dog bruge TacoTranslate.

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

Lad os installere det med npm i din terminal:

npm install tacotranslate

Trin 2: Opret en gratis TacoTranslate-konto

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

I TacoTranslate-applikationens brugergrænseflade opretter du et projekt og går til fanen for API-nøgler. Opret en read nøgle og en read/write nøgle. Vi gemmer dem som miljøvariabler. Den read nøgle er det, vi kalder public, og den read/write nøgle er secret. For eksempel kan du tilføje dem til en .env fil i projektets rodmappe.

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 klientside-produktionsmiljøer.

Vi tilføjer også to yderligere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalekode. 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 til 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 hjælp af de API-nøgler, du oprettede tidligere. For eksempel kan du oprette 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 lettere at bruge den igen senere. Nu vil vi, ved at bruge en brugerdefineret /pages/_app.tsx, tilføje TacoTranslate udbyderen.

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 brugerdefinerede pageProps og _app.tsx, udvid venligst definitionen med ovenstående egenskaber og kode.

Trin 4: Implementering af server-side rendering

TacoTranslate muliggør serverside-rendering af dine oversættelser. Dette forbedrer brugeroplevelsen markant ved straks at vise oversat indhold i stedet for først at vise en kortvarig uoversat version. Derudover kan vi undlade netværksanmodninger 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 kontrollen til din opsætning. Hvis true, vil TacoTranslate bruge den offentlige API-nøgle. 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 sat Next.js-applikationen op med en liste over understøttede sprog. Det næste, vi skal gøre, er at hente oversættelser for alle dine sider. For at gøre det bruger du enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps afhængigt af dine krav.

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

For at bruge en af funktionerne på 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 strenge til en Translate komponent. Bemærk, at kun miljøer med read/write tilladelser på API-nøglen vil kunne oprette nye strenge, som skal oversættes. Vi anbefaler, at du har et lukket og sikret staging-miljø, hvor du kan teste din produktionsapplikation med en sådan API-nøgle og tilføje nye strenge, inden du går live. Det vil forhindre, at nogen stjæler din hemmelige API-nøgle og potentielt fylder dit oversættelsesprojekt med nye, irrelevante strenge.

Sørg for at tjekke det komplette eksempel på vores GitHub-profil. Der finder du også et eksempel på, hvordan du gør dette ved hjælp af App Router! Hvis du støder på problemer, så tøv ikke med at kontakte os, og vi hjælper dig gerne.

TacoTranslate gør det muligt automatisk at lokalisere dine React-applikationer hurtigt til og fra mere end 75 sprog. Kom i gang i dag!