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 å lage applikasjoner som kan imøtekomme brukere fra forskjellige 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 kan legge til internasjonalisering i din React Next.js-applikasjon med server-side rendering. 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 din Next.js-applikasjon, skal 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 dine strenger til hvilket som helst språk ved hjelp av avansert AI, og frigjør deg fra det kjedelige arbeidet med å administrere 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 til et 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 flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalekode. I dette eksemplet 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 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. Opprett for eksempel 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 kommer snart til å automatisk definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE.

Å lage klienten i en egen fil gjør det enkelt å bruke den igjen senere. getLocales er bare en hjelpefunksjon med innebygd feilhåndtering. Nå kan du opprette 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, opprett en fil med navnet /app/[locale]/layout.tsx, 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 det språket. I tillegg sørger generateStaticParams for at alle lokaliseringskodene du har aktivert for prosjektet ditt blir forhåndsgenerert.

Nå, la oss 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 oppdaterte.

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 det først vises et øyeblikk 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 opprette 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 samsvar med Next.js Middleware-dokumentasjonen.

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

Trinn 5: Distribuer og test!

Vi er ferdige! Din React-applikasjon vil nå bli oversatt automatisk når du legger til strenger i en Translate komponent. Merk at bare 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 gjør oversettelsesprosjektet ditt unødvendig stort 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!