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

Ettersom verda blir meir globalisert, blir det stadig viktigare for webutviklarar å lage applikasjonar som kan tene brukarar frå ulike land og kulturar. Eit av hovudtiltaka for å oppnå dette er internasjonalisering (i18n), som gjer det mogleg å tilpasse applikasjonen din til ulike språk, valutar og datoformat.

I denne artikkelen skal vi sjå nærare 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 brukar App Router.
Dersom du brukar Pages Router, sjå denne guida i staden.

Steg 1: Installer eit i18n-bibliotek

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

TacoTranslate oversettar automatisk strengane dine til alle språk ved hjelp av banebrytande AI, og sparar deg for det tidkrevjande arbeidet med å handtere JSON-filer.

Lat oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ei gratis TacoTranslate-konto

No når du har installert modulen, er det på tide å opprette ein TacoTranslate-konto, eit oversettingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og krever ikkje at du legg inn eit kredittkort.

I brukargrensesnittet til TacoTranslate-applikasjonen, opprett eit prosjekt og gå til fana for API-nøklane. Opprett ein read‑nøkkel og ein read/write‑nøkkel. Vi lagrar dei som miljøvariablar. read‑nøkkelen er det vi kallar public og read/write‑nøkkelen er secret. Til dømes kan du leggje dei til i ei .env‑fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Me 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 den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Mappa der strengane dine blir lagra, til dømes URL-en til nettsida di. Les meir om opprinnelsar her.

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

Steg 3: Setje opp TacoTranslate

For å integrere TacoTranslate i applikasjonen din, må du opprette ein klient som nyttar API-nøklane frå tidlegare. Til dømes, lag ei fil kalla /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 om litt.

Å opprette klienten i ei eiga fil gjer det enkelt å bruke den igjen seinare. getLocales er berre ein hjelpefunksjon med noko innebygd feilhandsaming. No opprett ei fil med namnet /app/[locale]/tacotranslate.tsx, der vi skal 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>
	);
}

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

Når kontekstleverandøren no er klar, opprett ei fil med namnet /app/[locale]/layout.tsx, som er rotoppsettet i applikasjonen vår. Merk at denne stien har ei 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årt Dynamic Route‑parameter [locale] for å hente omsetjingar for det språket. I tillegg sørgjer generateStaticParams for at alle lokalekodane du har aktivert for prosjektet ditt vert forhåndsgenererte.

No skal me byggje vår første 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 halde omsetjingane dine oppdaterte.

Trinn 4: Implementering av server-side rendering

TacoTranslate støttar rendering på serversida. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med det same, i staden for at brukaren først ser eit kort glimt av uomsett innhald. I tillegg kan vi hoppe over nettverkskall på klienten, fordi vi allereie har dei omsetjingane vi treng for sida brukaren 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};
};

Tilpass isProduction‑sjekken til oppsettet ditt. Hvis true, vil TacoTranslate vise den offentlege API‑nøkkelen. Hvis 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 strenger blir sendt til omsetjing.

For å sikre at ruting og omdirigering fungerer som venta, treng vi å opprette ei fil med namnet /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukarar til sider vist på det språket dei føretrekk.

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å klienten kan du endre locale cookien for å endre kva språk brukaren føretrekk. Sjå den komplette eksempelkoden for idéar om korleis du kan gjere dette!

Trinn 5: Rull ut og test!

Vi er ferdige! React-applikasjonen din vil no bli automatisk omsett når du legg til strengar i ein Translate komponent. Merk at berre miljø med read/write tilgang til API-nøkkelen vil kunne opprette nye strengar for omsetjing. Vi tilrår å ha eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ei slik API-nøkkel, og leggje til nye strengar før du går live. Dette vil hindre nokon nokon i å stjele den hemmelege API-nøkkelen din, og potensielt blåse opp 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!