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 de viktigste måtene å oppnå dette på er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike språk, valutaer og datoformater.

I denne artikkelen skal vi utforske hvordan du legger til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. 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, vil vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksemplet derimot vil vi bruke TacoTranslate.

TacoTranslate oversetter automatisk strengene dine til alle språk ved hjelp av avansert AI, og frigjør deg fra det tidkrevende arbeidet med å administrere JSON-filer.

La oss installere det ved å bruke 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 krever ikke at du oppgir 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 til i en .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på at du aldri lekker den hemmelige read/write API-nøkkelen i produksjonsmiljøer på klientsiden.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalitetskode. I dette eksempelet 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 opprinnelser her.

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

Trinn 3: Sette opp TacoTranslate

For å integrere TacoTranslate med 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 vil implementere 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>
	);
}

Legg merke til 'use client'; som indikerer at dette er en klientkomponent.

Nå som kontekstprovideren er klar, opprett en fil med navnet /app/[locale]/layout.tsx, rotlayouten i applikasjonen vår. Merk at denne banen inneholder en mappe som bruker 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 du bør merke deg her er at vi bruker vår Dynamic Route parameter [locale] for å hente oversettelser for det aktuelle språket. I tillegg sørger generateStaticParams for at alle lokalkodene 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 oppdatert.

Trinn 4: Implementering av serverside-rendering

TacoTranslate støtter server-side rendering. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for at brukeren først ser et kort glimt av uoversatt innhold. I tillegg kan vi unngå 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 for ditt oppsett. Hvis true, vil TacoTranslate gjøre den offentlige API-nøkkelen tilgjengelig. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction is false), vil vi bruke den hemmelige read/write API-nøkkelen for å sikre at nye strenger blir sendt til oversettelse.

For å sikre at ruting og omdirigering fungerer som forventet, må vi opprette en fil som heter /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 dokumentasjonen for Next.js Middleware.

På klienten kan du endre locale cookie for å endre hvilket språk brukeren foretrekker. Se det komplette eksempelprosjektet for ideer om hvordan du kan gjøre dette!

Trinn 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil nå bli oversatt automatisk når du legger til noen strenger 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 blåse opp 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!