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

Ettersom 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 forskjellige språk, valutaer og datoformater.

I denne artikkelen skal vi utforske hvordan du legger til internasjonalisering i din React Next.js-applikasjon, med gjengivelse på serversiden. TL;DR: Se hele eksemplet her.

Denne guiden er for Next.js-applikasjoner som bruker App Router.
Hvis du bruker Pages Router, se denne guiden i stedet.

Trinn 1: Installer et i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, vil vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksempelet vil vi derimot bruke TacoTranslate.

TacoTranslate oversetter automatisk strengene dine til ethvert språk ved hjelp av banebrytende kunstig intelligens, og frigjør deg fra den tidkrevende håndteringen av 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 en 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 til produksjonsmiljøer på klientsiden.

Vi vil også legge til to ekstra miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempelet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "mappen" hvor strengene dine vil bli lagret, for eksempel nettadressen (URL) til nettstedet ditt. Les mer om origins her.

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

Trinn 3: Sette opp TacoTranslate

For å integrere TacoTranslate i applikasjonen din, må du opprette en klient som bruker API-nøklene fra tidligere. For eksempel kan du opprette en fil som heter /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 kommer snart til å definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE automatisk.

Å opprette klienten i en egen fil gjør det enkelt å bruke den senere. getLocales er bare en hjelpefunksjon med innebygd feilhåndtering. Opprett nå en fil som heter /app/[locale]/tacotranslate.tsx, hvor vi skal implementere TacoTranslate provider-komponenten.

'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år kontekstleverandøren nå er klar, opprett en fil med navnet /app/[locale]/layout.tsx, som er rotoppsettet i applikasjonen vår. Merk at denne banen 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 dette språket. I tillegg sørger generateStaticParams for at alle locale-kodene 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!" />
	);
}

Legg merke til revalidate variabelen som forteller Next.js å bygge siden på nytt etter 60 sekunder, og holde oversettelsene dine oppdatert.

Trinn 4: Implementering av server-side rendering

TacoTranslate støtter server-side rendering. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for at uoversatt innhold vises først i et kort øyeblikk. I tillegg kan vi unngå nettverksforespørsler fra 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 sjekken for isProduction slik at den passer for oppsettet ditt. Hvis true, vil TacoTranslate vise 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 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 Next.js Middleware-dokumentasjonen.

På klienten kan du endre locale cookieen for å endre hvilket språk brukeren foretrekker. Se den komplette eksempelkoden for ideer om hvordan du gjør dette!

Trinn 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil nå bli oversatt automatisk når du legger til tekststrenger 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 stjeler din hemmelige API-nøkkel, og potensielt blåse opp oversettelsesprosjektet ditt ved å legge til nye, ikke-relaterte 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!