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

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for webutviklarar å lage applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av hovudmetodane for å oppnå dette er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen til ulike språk, valutaer og datoformat.

I denne artikkelen skal vi sjå på korleis ein kan leggje til internasjonalisering i React Next.js-applikasjonen din, med server-side rendering. TL;DR: Sjå det fullstendige eksemplet her.

Denne guida er for Next.js-applikasjonar som brukar App Router.
Hvis du nyttar 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 eksempelet vil vi likevel bruke TacoTranslate.

TacoTranslate omset automatisk strengene dine til kva som helst språk ved hjelp av avansert AI, og frigjer deg frå den møysame handteringa av 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 installert modulen, er det på tide å opprette din TacoTranslate-konto, eit omsetjingsprosjekt, og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje leggje inn kredittkort.

I TacoTranslate-applikasjonen, opprett eit prosjekt, og naviger til fanen for API-nøklar. Opprett ein read nøkkel, og ein read/write nøkkel. Vi vil lagre dei som miljøvariablar. read nøkkelen er det vi kallar public og read/write nøkkelen er secret. Til dømes kan du legge dei til i ei .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver trygg på å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljø.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: “Mappa” der strengene dine blir lagra, som for eksempel URL-en til nettsida di. Les meir om originar 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 ein klient ved å bruke API-nøklane frå tidlegare. Til dømes, opprett ei fil med namnet /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 feilhandsaming. No, lag ei fil kalla /app/[locale]/tacotranslate.tsx, der vi skal implementere TacoTranslate provider.

'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 klar, opprett ei fil med namnet /app/[locale]/layout.tsx, rotoppsettet i applikasjonen vår. Merk at denne banen 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 å 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 lokaliseringskodane du har aktivert for prosjektet ditt blir pre-renderte.

No skal vi byggje vår fyrste side! Lag ein 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 omsettingane dine oppdaterte.

Steg 4: Implementering av server-side rendering

TacoTranslate støttar server-side rendering. Dette betrar brukaropplevinga betydeleg ved å vise omsette innhald med ein gong, i staden for først å vise eit blink av ikkje-omsett innhald. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har dei omsettingane 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};
};

Endre isProduction -sjekken slik at den passar oppsettet ditt. Hvis true vil TacoTranslate bruke 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 routing og omdirigering fungerer som forventa, må vi lage ei fil med namnet /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukarar til sider vist på 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);
}

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

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

Steg 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil nå bli oversatt automatisk når du legger til strenger i ein Translate komponent. Merk at det berre er miljø med read/write tilgang på API-nøkkelen som kan opprette nye strenger som skal oversetjast. 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 stjeler den hemmelige API-nøkkelen din, og potensielt oppblåser oversettingsprosjektet ditt ved å legge til nye, irrelevante strenger.

Ver sikker på å sjekke ut det komplette eksempelet på vår GitHub-profil. Der vil du også finne eit døme på korleis du kan gjere dette med Pages Router! Om du støter på problem, er det berre å ta kontakt, så hjelper vi deg meir enn gjerne.

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