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

Ettersom verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan møta brukarar frå ulike land og kulturar. Eit av dei viktigaste tiltaka for å oppnå dette er internasjonalisering (i18n), som gjer det mogleg å tilpasse applikasjonen din til ulike språk, valutaar og datoformat.

I denne artikkelen skal vi sjå på korleis du kan legge til internasjonalisering i React Next.js-applikasjonen din, med server-side rendering. TL;DR: Sjå heile dømet her.

Denne rettleiinga er for Next.js-applikasjonar som brukar App Router.
Viss du brukar Pages Router, sjå denne rettleiinga i staden.

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, skal vi fyrst velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette dømet derimot skal vi bruke TacoTranslate.

TacoTranslate omset automatisk strengane dine til alle språk ved hjelp av banebrytande AI, og frigjer deg frå den tidkrevjande handteringa av JSON-filer.

Lat oss installere det ved å bruke npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

Sidan du no har installert modulen, er det på tide å opprette ein TacoTranslate-konto, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje oppgi eit kredittkort.

I brukargrensesnittet til TacoTranslate, opprett eit prosjekt, og gå til fanen for API-nøklar. Opprett ein read nøkkel, og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. Den 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 rotmappa til prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på å aldri lekke den hemmelege 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 dømet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: “Mappa” der strengane dine blir lagra, til dømes URL-en til nettstaden din. 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 dei tidlegare API-nøklane. Til dømes kan du opprette 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 kjem til å automatisk definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE om kort tid.

Å opprette klienten i ei eiga fil gjer det enkelt å bruke på nytt seinare. getLocales er berre ei hjelpefunksjon med noko innebygd feilhandsaming. No opprett ei fil med namnet /app/[locale]/tacotranslate.tsx, der vi skal implementere TacoTranslate tilbydaren.

'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 kontekstprovideren 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 parametaren.

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 brukar vår Dynamic Route parameter [locale] for å hente omsetjingar for det aktuelle språket. I tillegg sørgjer generateStaticParams for at alle lokalkodane du har aktivert for prosjektet ditt blir forhandsrenderte.

No skal vi byggje vår fyrste side! Opprett 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 å bygge sida på nytt etter 60 sekund, og halde omsetjingane dine oppdaterte.

Steg 4: Implementering av serversiderendering

TacoTranslate støttar server-side rendering. Dette forbetrar brukaropplevinga mykje ved at omsett innhald blir vist med ein gong, i staden for at brukaren først ser eit blaff av uomsett innhald. I tillegg kan vi slippe nettverkskall på klienten, fordi vi allereie har dei omsetjingane vi treng for sida brukaren ser på.

For å setje opp serversidig gjengivelse, 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 isProduction slik at den passar til oppsettet ditt. Dersom true, vil TacoTranslate vise den offentlege API-nøkkelen. Om 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 strenger blir sendt til omsetjing.

For å sikre at ruting og omdirigering fungerer som forventa, må vi opprette ei fil med namnet /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukarar til sider som blir vist på føretrekt 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);
}

Pass på å setje opp matcher i samsvar med dokumentasjonen for Next.js Middleware.

På klienten kan du endre locale informasjonskapselen for å endre kva språk brukaren føretrekk. Sjå den komplette eksempelkoden for idear om korleis du kan gjere dette!

Steg 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil no automatisk bli omsett når du legg til strengar i ein Translate komponent. Merk at berre miljø med read/write tillatelsar på API-nøkkelen vil kunne opprette nye strengar som skal omsetjast. Vi anbefaler å 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 i produksjon. Dette vil hindre nokon i å stjele den hemmelege API-nøkkelen din, og potensielt gjere omsetjingsprosjektet ditt oppblåst ved å leggje 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!