Sådan implementerer du internationalisering i en Next.js-applikation, der bruger App Router

I takt med at verden bliver mere globaliseret, bliver det stadig vigtigere for webudviklere at bygge applikationer, der kan imødekomme brugere fra forskellige lande og kulturer. Et af de vigtigste midler til at opnå dette er internationalisering (i18n), som gør det muligt at tilpasse din applikation til forskellige sprog, valutaer og datoformater.

I denne artikel vil vi gennemgå, hvordan du 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 App Router.
Hvis du bruger Pages 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 tekststrenge til alle sprog ved hjælp af banebrydende AI og frigør dig fra den tidskrævende håndtering af 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 modulet installeret, er det tid til at oprette din TacoTranslate-konto, et oversættelsesprojekt og tilhørende 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 skal du oprette et projekt og navigere til fanen for API-nøgler. Opret en read nøgle og en 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 fø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 produktionsmiljøer på klientsiden.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempel sætter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Den “mappe”, hvor dine strenge vil blive gemt, såsom URL'en på din hjemmeside. 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 i din applikation skal du oprette en klient, der bruger de API-nøgler, du oprettede 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Vi vil snart automatisk definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE.

At oprette klienten i en separat fil gør det nemt at bruge den igen senere. getLocales er blot en hjælpefunktion med indbygget fejlbehandling. Opret nu en fil med navnet /app/[locale]/tacotranslate.tsx, hvor vi implementerer TacoTranslate provideren.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Bemærk 'use client'; som angiver, at dette er en klientkomponent.

Når kontekstprovideren nu er klar til brug, opret en fil med navnet /app/[locale]/layout.tsx, som er root-layoutet i vores applikation. Bemærk, at denne sti har en mappe, der anvender Dynamic Routes, hvor [locale] er den dynamiske parameter.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Det første, man bør bemærke her, er, at vi bruger vores parameter Dynamic Route [locale] til at hente oversættelser for det pågældende sprog. Derudover sørger generateStaticParams for, at alle de sprogkoder, du har aktiveret for dit projekt, forhåndsgenereres.

Nu skal vi bygge vores første side! Opret en fil med navnet /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Bemærk revalidate variablen, der fortæller Next.js at genopbygge siden efter 60 sekunder, og holde dine oversættelser opdaterede.

Trin 4: Implementering af serverside-rendering

TacoTranslate understøtter server-side rendering. Det forbedrer brugeroplevelsen markant ved straks at vise oversat indhold i stedet for først at vise et kort glimt af uoversat indhold. Derudover kan vi springe netværksforespørgsler på klienten over, fordi vi allerede har de oversættelser, vi skal bruge til den side, brugeren ser.

For at opsætte server-side rendering, opret eller rediger /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Tilpas isProduction tjekket, så det passer til din opsætning. Hvis true, vil TacoTranslate gøre den offentlige API-nøgle synlig. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction is false), bruger vi den hemmelige read/write API-nøgle for at sikre, at nye strenge bliver sendt til oversættelse.

For at sikre, at routing og omdirigering fungerer som forventet, skal vi oprette en fil med navnet /middleware.ts. Ved at bruge Middleware, kan vi omdirigere brugere til sider, der præsenteres på deres foretrukne sprog.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Sørg for at opsætte matcher i overensstemmelse med Next.js Middleware-dokumentationen.

På klienten kan du ændre locale cookie'en for at ændre brugerens foretrukne sprog. Se den komplette eksempelkode for idéer til, hvordan du gør dette!

Trin 5: Udrul og test!

Så er vi 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, der skal oversættes. Vi anbefaler at have 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. Dette vil forhindre enhver enhver i at stjæle din hemmelige API-nøgle og potentielt oppuste dit oversættelsesprojekt ved at tilføje nye, ikke-relaterede strenge.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!