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

Etter hvert som verden blir mer globalisert, blir det stadig viktigere for nettutviklere å 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 gjør at du kan tilpasse applikasjonen din til forskjellige språk, valutaer og datoformater.

I denne artikkelen skal vi utforske hvordan du kan legge til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Se hele eksempelet 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 eksempelet vil vi imidlertid bruke TacoTranslate.

TacoTranslate oversetter automatisk strengene dine til hvilket som helst språk ved hjelp av banebrytende AI, og frigjør deg fra det tidkrevende arbeidet med å håndtere JSON-filer.

La oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 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 legger inn kredittkort.

Innenfor TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt og naviger til fanen for API-nøkler. Opprett én read nøkkel og én read/write nøkkel. Vi vil lagre dem som miljøvariabler. read nøkkelen kaller vi 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å å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljøer.

Vi vil også legge til to miljøvariabler til: 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 lagres, for eksempel URL-en til nettstedet ditt. Les mer om origins her.

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

Steg 3: Sette opp TacoTranslate

For å integrere TacoTranslate med applikasjonen din, må du opprette en klient ved å bruke 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 feilbehandling. Nå, opprett en fil med navnet /app/[locale]/tacotranslate.tsx, hvor 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>
	);
}

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

Med kontekstleverandøren nå klar til bruk, oppretter du en fil med navnet /app/[locale]/layout.tsx, som er rotlayouten i vår applikasjon. Merk at denne stien har 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 å merke seg her er at vi bruker vår Dynamic Route parameter [locale] for å hente oversettelser for det språket. I tillegg sørger generateStaticParams for at alle lokalekoder du har aktivert for prosjektet ditt blir forhåndsgenerert.

Nå skal vi bygge vår første side! Opprett en fil med navnet /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.

Steg 4: Implementering av server-side rendering

TacoTranslate støtter server-side rendering. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for først en kort blink med 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 for å passe ditt oppsett. Hvis true, vil TacoTranslate bruke 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 å sikre at nye strenger sendes for oversettelse.

For å sikre at ruting og omdirigering fungerer som forventet, må vi lage en fil kalt /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukere til sider vist 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 henhold til Next.js Middleware-dokumentasjonen.

På klienten kan du endre locale cookie for å endre hva brukerens foretrukne språk er. Vennligst se det komplette eksempel-kode for ideer om hvordan du gjør dette!

Steg 5: Distribuer og test!

Vi er ferdige! Din React-applikasjon vil nå bli automatisk oversatt når du legger til strenger i en Translate komponent. Merk at kun miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger for oversettelse. Vi anbefaler å ha et lukket og sikkert 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 stjeler din hemmelige API-nøkkel, og potensielt øker størrelsen på oversettelsesprosjektet ved å legge til nye, irrelevante strenger.

Pass på å sjekke ut det komplette eksemplet på vår GitHub-profil. Der vil du også finne et eksempel på hvordan du gjør dette med Pages Router! Hvis du støter på problemer, ikke nøl med å kontakte oss, så hjelper vi deg mer enn gjerne.

TacoTranslate lar deg automatisk lokal tilpasse dine React-applikasjoner raskt til og fra alle språk. Kom i gang i dag!