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

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av hovudmåtene å oppnå dette på, er gjennom internasjonalisering (i18n), som gir deg moglegheit til å tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne artikkelen vil vi sjå på korleis du kan leggje til internasjonalisering i din React Next.js-applikasjon, med server side rendering. TL;DR: Sjå det fullstendige dømet her.

Denne guiden er for Next.js-applikasjonar som bruker App Router.
Om du bruker Pages Router, sjå heller denne guida.

Steg 1: Installer eit i18n-bibliotek

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

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

La oss installere det ved å bruke npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

No som du har fått modulen installert, er det på tide å opprette din TacoTranslate-konto, eit oversettingsprosjekt, og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje å oppgi kredittkort.

Innanfor TacoTranslate-applikasjonen sin brukargrensesnitt, opprett eit prosjekt, og naviger til API-nøkkel-fanen. Opprett ein read nøkkel, og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. read nøkkelen kallast public og read/write nøkkelen kallast secret. Til dømes kan du legge dei til i ein .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver sørg for å aldri lekke den hemmelige read/write API-nøkkelen til produksjonsmiljø på klient-sida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard reservelokalkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: “Mappa” der strengane dine blir lagra, som til dømes URL-en til nettsida di. Les meir om origins her.

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

Steg 3: Sette opp TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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.

Å lage klienten i ei eiga fil gjer det enkelt å bruke den igjen seinare. getLocales er berre ein hjelpefunksjon med innebygd feilhåndtering. No skal du lage ei fil kalla /app/[locale]/tacotranslate.tsx, der vi vil implementere TacoTranslate leverandøren.

'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 ein klientkomponent.

Med kontekstleverandøren no klar til bruk, opprett ein fil med namnet /app/[locale]/layout.tsx, hovudlayouten i applikasjonen vår. Merk at denne banen 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 å merke seg her er at vi bruker vår Dynamic Route parameter [locale] for å hente omsettingar for det språket. I tillegg sørgjer generateStaticParams for at alle språkkodane du har aktivert for prosjektet ditt, blir ferdig rendra på førehand.

No kan vi lage den fyrste sida vår! Opprett ein fil kalla /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 om å bygge sida på nytt etter 60 sekund, og halde omsetjingane dine oppdaterte.

Steg 4: Implementering av server-side rendering

TacoTranslate støttar server-side rendering. Dette forbetrar brukaropplevinga betydeleg ved å vise omsette innhald med ein gong, i staden for først ein blink med uomsett innhald. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har 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 den passar for oppsettet ditt. Om 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 å sikre at nye strengjer blir sendt til omsetjing.

For å sikre at ruting og omdirigering fungerer som forventet, må vi lage ein fil kalla /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukarar til sider vist på det språk dei føretrekkjer.

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

Pass på å sette opp matcher i samsvar med Next.js Middleware-dokumentasjonen.

På klienten kan du endre locale cookien for å endre kva som er brukarens føretrekte språk. Sjå det komplette eksempel-kode for idear om korleis du kan gjere dette!

Steg 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil no automatisk bli omsett når du legg til nye strenger i ein Translate komponent. Merk at berre miljø med read/write tilgang på API-nøkkelen vil kunne opprette nye strenger som skal omsetjast. Vi anbefaler å ha eit lukka og sikkert staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og legge til nye strenger før du går live. Dette vil hindre at nokon steler den hemmelige API-nøkkelen din, og potensielt sprengjer omsetjingsprosjektet ditt ved å legge til nye, ikkje-relaterte strenger.

Hugs å sjå det komplette eksempelet på vår GitHub-profil. Der finn du òg eit døme på korleis du kan gjere dette med Pages Router ! Dersom du møter på problem, ikkje nøl med å ta kontakt, så hjelper vi deg gjerne.

TacoTranslate lar deg automatisk lokaliserer React-applikasjonane dine raskt til og frå alle språk. Kom i gang i dag!