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

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan tilpasse seg brukarar frå ulike land og kulturar. Ein av dei viktigaste måtane å oppnå dette på er gjennom internasjonalisering (i18n), som let deg tilpasse applikasjonen din til forskjellige språk, valutaer og datoverformat.

I denne artikkelen skal vi utforske korleis du legg til internasjonalisering i React Next.js-applikasjonen din, med server side rendering. TL;DR: Sjå det fullstendige eksempelet her.

Denne guida er for Next.js-applikasjonar som bruker App Router.
Om du bruker Pages Router, sjå denne guida i staden.

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 derimot bruke TacoTranslate.

TacoTranslate omset automatisk strengene dine til eit kva som helst språk med toppmoderne AI, og frigjer deg frå den tidkrevjande 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 når du har installert modulen, er det på tide å opprette ein TacoTranslate-konto, eit omsetjingsprosjekt og tilhøyrande API-nøkkelar. Opprett ein konto her. Det er gratis, og krev ikkje at du legg til eit kredittkort.

Innenfor brukargrensesnittet til TacoTranslate-applikasjonen, opprett eit prosjekt og naviger til fana for API-nøklar. Opprett ein read nøkkel, og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. read nøkkelen er det vi kallar public og read/write nøkkelen er secret. Til dømes kan du leggje dei til i ein .env fil i rota av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver sørgje for å aldri lekke den hemmelige read/write API-nøkkelen til klient-sida produksjonsmiljø.

Vi vil også legge til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard tilbakefallslokalekode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "Mappa" der tekstane dine vert lagra, for eksempel URL-en til nettsida di. Les meir om originar her.

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

Steg 3: Setje 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 snart automatisk definere TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE.

Å opprette klienten i ei eiga fil gjer det enkelt å bruke den igjen seinare. getLocales er berre ei hjelpefunksjon med innebygd feilhandtering. Opprett no ei fil med namnet /app/[locale]/tacotranslate.tsx, der 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>
	);
}

Merk 'use client'; som indikerer at dette er ein klientkomponent.

Med kontekstleverandøren no klar til bruk, opprett ein fil med namnet /app/[locale]/layout.tsx, rotoppsettet i applikasjonen vår. Merk at denne banen har ein 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 omsetjingar for det språket. I tillegg sørgjer generateStaticParams for at alle lokalkodane du har aktivert for prosjektet ditt blir forhåndsrenderte.

No skal vi byggje vår fyrste side! Lag ei fil som heiter /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 server-side rendering

TacoTranslate støttar server-side rendering. Dette betra brukaropplevinga mykje ved å vise omsette innhald med ein gong, i staden for eit blaff med uomsett innhald først. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har 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 for å passe til oppsettet ditt. Om true vil TacoTranslate bruke den offentlege API-nøkkelen. Om vi er i eit lokalt, test- eller staging-miljø (isProduction is false) vil vi bruke den hemmelige read/write API-nøkkelen for å sikre at nye strengjer blir sendt for omsetjing.

For å sikre at routing og omdirigering fungerer som forventa, må vi lage ei fil kalla /middleware.ts. Ved å bruke Middleware, kan vi omdirigere brukarar til sider vist på deira føretrekte 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 Next.js Middleware-dokumentasjonen.

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

Steg 5: Distribuer og test!

Vi er ferdige! React-applikasjonen din vil no bli automatisk omsett når du legg til tekststrengar i ein Translate komponent. Merk at berre miljø med read/write tilgang på API-nøkkelen vil kunne opprette nye tekststrengar for omsetjing. Vi tilrår å ha eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og leggje til nye tekststrangar før du går live. Dette vil hindre at nokon stjeler din hemmelige API-nøkkel, og potensielt gjer oversettingsprosjektet ditt unødvendig stort ved å legge til nye, ikkje-relaterte tekststrangar.

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!