Hvordan implementere internasjonalisering i en Next.js-applikasjon som bruker App Router

Etter hvert som verden blir mer globalisert, blir det stadig viktigere for webutviklere å bygge applikasjoner som kan imøtekomme brukere fra ulike land og kulturer. En av hovedmåtene å oppnå dette på er gjennom internasjonalisering (i18n), som gjør det mulig å tilpasse applikasjonen din til forskjellige språk, valutaer og datoformater.

I denne artikkelen skal vi se på hvordan du legger til internasjonalisering i din React Next.js-applikasjon, med gjengivelse på serversiden. TL;DR: Se hele eksemplet her.

Denne veiledningen er for Next.js-applikasjoner som bruker App Router.
Hvis du bruker Pages Router, se denne veiledningen i stedet.

Trinn 1: Installer et i18n-bibliotek

For å implementere internasjonalisering i din Next.js-applikasjon, velger vi først et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksemplet vil vi derimot bruke TacoTranslate.

TacoTranslate oversetter automatisk tekststrengene dine til hvilket som helst språk ved hjelp av banebrytende kunstig intelligens, og frigjør deg fra det tidkrevende arbeidet med å administrere JSON-filer.

La oss installere det med npm i terminalen din:

npm install tacotranslate

Trinn 2: Opprett en gratis TacoTranslate-konto

Nå som du har installert modulen, er det på tide å opprette din TacoTranslate-konto, et oversettelsesprosjekt og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og du trenger ikke å oppgi et kredittkort.

I TacoTranslate-applikasjonens brukergrensesnitt oppretter du et prosjekt og går til fanen for API-nøkler. Opprett en read nøkkel og en read/write nøkkel. Vi lagrer dem som miljøvariabler. read‑nøkkelen er det vi kaller public og read/write‑nøkkelen er secret. For eksempel kan du legge dem i en .env fil i prosjektets rotmappe.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sørg for å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljøer.

Vi vil også legge til to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksemplet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "Mappen" hvor strengene dine vil bli lagret, for eksempel URL-en til nettstedet ditt. Les mer om origins her.

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

Trinn 3: Sette opp TacoTranslate

For å integrere TacoTranslate i applikasjonen din må du opprette en klient som bruker API-nøklene fra tidligere. For eksempel opprett 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.

Å opprette klienten i en egen fil gjør det enkelt å bruke den igjen senere. getLocales er bare en hjelpefunksjon med innebygd feilhåndtering. Opprett nå en fil med navnet /app/[locale]/tacotranslate.tsx, hvor vi skal implementere TacoTranslate provider.

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

Merk 'use client'; som indikerer at dette er en klientkomponent.

Med kontekstleverandøren klar til bruk, opprett en fil kalt /app/[locale]/layout.tsx, som er rotoppsettet i applikasjonen vår. Merk at denne stien inneholder en mappe som benytter Dynamic Routes, hvor [locale] er den dynamiske parameteren.

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 å merke seg her er at vi bruker vår parameter Dynamic Route [locale] for å hente oversettelser for det aktuelle språket. I tillegg sørger generateStaticParams for at alle lokalekodene du har aktivert for prosjektet ditt blir forhåndsgenerert.

Nå skal vi bygge vår første side! Opprett en fil som heter /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!" />
	);
}

Merk revalidate variabelen som forteller Next.js å bygge siden på nytt etter 60 sekunder, og holde oversettelsene dine oppdaterte.

Trinn 4: Implementering av server-side rendering

TacoTranslate støtter gjengivelse på serversiden. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for å først vise et kort glimt av uoversatt innhold. I tillegg kan vi hoppe over nettverksforespørsler på klienten, fordi vi allerede har oversettelsene vi trenger for siden brukeren ser på.

For å sette opp server-side rendering, opprett eller endre /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};
};

Endre isProduction sjekken slik at den passer til oppsettet ditt. Hvis true, vil TacoTranslate vise den offentlige API-nøkkelen. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction is false), vil vi bruke den hemmelige read/write API-nøkkelen for å sørge for at nye strenger sendes til oversettelse.

For å sikre at ruting og omdirigering fungerer som forventet, må vi opprette en fil kalt /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukere til sider som vises på deres foretrukne språk.

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 å sette opp matcher i samsvar med Next.js-dokumentasjonen for Middleware.

På klienten kan du endre locale‑cookien for å endre brukerens foretrukne språk. Se eksempelkoden for idéer om hvordan du gjør dette!

Trinn 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil nå bli oversatt automatisk når du legger til tekststrenger i en Translate komponent. Merk at kun miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger som skal oversettes. Vi anbefaler å ha et lukket og sikret staging-miljø hvor du kan teste produksjonsapplikasjonen din med en slik API-nøkkel, og legge til nye strenger før du går live. Dette vil forhindre at noen noen stjeler din hemmelige API-nøkkel, og potensielt oppblåse oversettelsesprosjektet ditt ved å legge til nye, urelaterte strenger.

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!