Korleis implementere internasjonalisering i ein Next.js-applikasjon som brukar App Router

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for webutviklarar å byggje applikasjonar som kan møte brukarar frå ulike land og kulturar. Ein av dei viktigaste måtane å oppnå dette på er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike språk, valutaar og datoformat.

I denne artikkelen skal vi sjå på korleis du legg til internasjonalisering i React Next.js-applikasjonen din, med server-side rendering. TL;DR: Sjå heile dømet her.

Denne guida er for Next.js-applikasjonar som nyttar App Router.
Dersom du brukar Pages Router, sjå denne guida i staden.

Trinn 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, skal vi først velje eit i18n-bibliotek. Det finst fleire populære bibliotek, mellom anna next-intl. I dette dømet bruker vi derimot TacoTranslate.

TacoTranslate omset tekstane dine automatisk til alle språk ved hjelp av avansert AI, og frigjer deg frå det tidkrevjande arbeidet med å handtere JSON-filer.

Lat oss installere det ved hjelp av npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

Når du no har installert modulen, er det på tide å opprette TacoTranslate-kontoen din, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og krev ikkje at du oppgir eit kredittkort.

I brukargrensesnittet i TacoTranslate-applikasjonen opprett eit prosjekt, og gå til fanen for API-nøklar. Opprett ein read nøkkel og ein read/write nøkkel. Vi vil lagre dei som miljøvariablar. Den read nøkkelen er det me kallar public og read/write nøkkelen er secret. Til dømes kan du leggje dei til i ei .env‑fil i rotmappa i prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på at du aldri lekkjer den hemmelege read/write API-nøkkelen til produksjonsmiljø på klientsida.

Vi vil òg leggje til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback‑lokalkode. I dette dømet set vi standarden til en for engelsk.
• TACOTRANSLATE_ORIGIN: Den “mappa” der strengane dine vert lagra, til dømes URL-en til nettstaden di. Les meir om originar her.

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

Steg 3: Setje opp TacoTranslate

For å integrere TacoTranslate med applikasjonen din, må du opprette ein klient ved å bruke API-nøklane frå tidlegare. Til dømes opprett ei fil med namnet /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 kjem til å definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE automatisk om kort tid.

Å opprette klienten i ei eiga fil gjer det lett å bruke den igjen seinare. getLocales er berre ein hjelpefunksjon med noko innebygd feilhandsaming. Opprett så ei fil med namnet /app/[locale]/tacotranslate.tsx, der vi skal implementere TacoTranslate tilbydaren.

'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 viser at dette er ein klientkomponent.

Med konteksttilbydaren no klar, opprett ei fil med namnet /app/[locale]/layout.tsx, rotoppsettet i applikasjonen vår. Merk at denne stien har ein mappe som nyttar Dynamic Routes, der [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 ein bør merke seg her, er at vi brukar vår Dynamic Route parameter [locale] for å hente omsetjingar for dette språket. I tillegg sørgjer generateStaticParams for at alle locale-kodane du har aktivert for prosjektet ditt blir forhåndsrendra.

No lat oss bygge vår fyrste side! Lag ei fil med namnet /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 fortel Next.js å byggje sida på nytt etter 60 sekund, og halda omsetjingane dine oppdaterte.

Trinn 4: Implementering av serverside-rendering

TacoTranslate støttar server-side rendering. Dette forbetrar brukaropplevinga vesentleg ved å vise omsett innhald med ein gong, i staden for at det først kjem eit kort glimt av uomsett innhald. Dessutan kan vi unngå nettverksforespurnader frå klienten, sidan vi allereie har dei omsetjingane vi treng for sida brukaren ser på.

For å setje 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 ho passar til oppsettet ditt. Dersom true, vil TacoTranslate vise den offentlege API-nøkkelen. Dersom vi er i eit lokalt, test- eller staging-miljø (isProduction is false), vil vi bruke den hemmelege read/write API-nøkkelen for å sørgje for at nye strengjer vert sende for omsetjing.

For å sikre at ruting og omdirigering fungerer som forventa, må vi opprette ei fil med namnet /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukarar til sider vist på deira føretrekte 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 å setje opp matcher i samsvar med Next.js Middleware-dokumentasjonen.

På klientsida kan du endre locale cookie for å endre kva språk brukaren føretrekk. Sjå den komplette eksempelkoden for idear om korleis du kan gjera dette!

Steg 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil no bli automatisk omsett når du legg til tekststrengar i ein Translate komponent. Merk at berre miljø med read/write tilgang til API-nøkkelen vil kunne opprette nye strengar som skal omsetjast. Vi tilrår at du har eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og leggje til nye strengar før du set den i produksjon. Dette vil hindre at nokon steler den hemmelege API-nøkkelen din, og potensielt oppblåse omsetjingsprosjektet ditt ved å legge til nye, ikkje-relaterte strengar.

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!