Hvordan man implementerer internationalisering i en Next.js-applikation, der bruger App 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 artikel 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 guide er til Next.js-applikationer, der bruger App Router.
Hvis du bruger Pages Router, se denne guide 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, herunder 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 befrier dig fra det kedelige arbejde med at håndtere 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 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 brugerflade skal du oprette et projekt og navigere til fanen for API-nøgler. Opret én read nøgle og én read/write nøgle. Vi gemmer dem som miljøvariabler. read nøglen kalder vi 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 afsløre den hemmelige read/write API-nøgle til klient-side produktionsmiljøer.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-sproget. I dette eksempel sætter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Den "mappe", hvor dine strenge vil blive gemt, for eksempel URL’en på dit website. 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 client ved hjælp af 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Vi vil automatisk definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE snart.

At oprette klienten i en separat fil gør det nemt at bruge den igen senere. getLocales er bare en hjælpefunktion med indbygget fejlhåndtering. Opret nu en fil kaldet /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.

Med context provideren nu klar til brug, opret en fil ved navn /app/[locale]/layout.tsx, som er rodlayoutet i vores applikation. Bemærk, at denne sti indeholder en mappe, der bruger 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 skal bemærke her, er, at vi bruger vores Dynamic Route parameter [locale] til at hente oversættelser for det pågældende sprog. Derudover sikrer generateStaticParams, at alle de lokalekoder, du har aktiveret for dit projekt, bliver forhåndsgengivet.

Lad os nu 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, som fortæller Next.js at genopbygge siden efter 60 sekunder og holde dine oversættelser opdaterede.

Trin 4: Implementering af server-side rendering

TacoTranslate understøtter server-side rendering. Dette 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ærksanmodninger over på klienten, fordi vi allerede har de nødvendige oversættelser til den side, brugeren ser.

For at sætte server side rendering op, 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 kontrollen 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.

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 vist 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 for at ændre, hvad brugerens foretrukne sprog er. Se venligst det komplette eksempel på kode for idéer til, hvordan du gør dette!

Trin 5: Deploy og test!

Vi er færdige! Din React-applikation vil nu blive oversat automatisk, når du tilføjer tekststrenge til en Translate komponent. Bemærk, at kun miljøer med read/write tilladelser til API-nøglen vil kunne oprette nye tekststrenge til oversættelse. Vi anbefaler at have et lukket og sikkert staging-miljø, hvor du kan teste din produktionsapplikation med en API-nøgle som denne, og tilføje nye tekststrenge inden go-live. Dette vil forhindre, at nogen stjæler din hemmelige API-nøgle, og potentielt overbelaster dit oversættelsesprojekt ved at tilføje nye, irrelevante tekststrenge.

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

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