Kouman pou aplike entènasyonalizasyon nan yon aplikasyon Next.js ki itilize App Router

Pandan mond lan ap vin pi mondyalize, li vin toujou pi enpòtan pou devlopè entènèt yo bati aplikasyon ki kapab sèvi itilizatè ki soti nan diferan peyi ak kilti. Youn nan fason kle pou reyalize sa se atravè entènasyonalizasyon (i18n), ki pèmèt ou adapte aplikasyon ou a pou diferan lang, lajan, ak fòma dat.

NAN atik sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, ak rann sou bò sèvè. TL;DR: Gade egzanp konplè a isit la.

Gid sa a pou aplikasyon Next.js k ap itilize App Router.
Si w ap itilize Pages Router, gade gid sa a pito.

Etap 1: Enstale yon bibliyotèk i18n

Pou aplike entènasyonalizasyon nan aplikasyon Next.js ou a, nou pral premye chwazi yon bibliyotèk i18n. Gen plizyè bibliyotèk popilè, tankou next-intl. Nan egzanp sa a, sepandan, n ap itilize TacoTranslate.

TacoTranslate tradui chenn tèks ou yo otomatikman nan nenpòt lang lè l sèvi avèk entèlijans atifisyèl avanse, epi li libere ou de jesyon fatigan dosye JSON yo.

Ann enstale li itilize npm nan tèminal ou:

npm install tacotranslate

Step 2: Kreye yon kont TacoTranslate gratis

Kounye a ke ou gen modil la enstale, li lè pou w kreye kont TacoTranslate ou, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, epi pa mande w mete yon kat kredi.

Nan UI aplikasyon TacoTranslate la, kreye yon pwojè, epi ale sou onglet kle API li yo. Kreye yon kle read ak yon kle read/write. Nou pral sove yo kòm varyab anviwònman. Kle read la se sa nou rele public epi kle read/write la se secret. Pa egzanp, ou ta ka ajoute yo nan yon dosye .env nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pa janm revele kle API sekrè read/write la sou bò kliyan nan anviwònman pwodiksyon.

Nou pral ajoute de lòt varyab anviwònman tou: TACOTRANSLATE_DEFAULT_LOCALE ak TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal de defo ki sèvi kòm ranplasman. Nan egzanp sa a, n ap mete li sou en pou angle.
• TACOTRANSLATE_ORIGIN: “Katab” kote chenn tèks ou yo ap estoke, tankou URL sitwèb ou a. Li plis sou orijin yo isit la.

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

Etap 3: Konfigire TacoTranslate

Pou entegre TacoTranslate ak aplikasyon ou a, ou pral bezwen kreye yon client lè w itilize kle API yo soti pi bonè. Pa egzanp, kreye yon fichye ki rele /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;

N ap otomatikman defini TACOTRANSLATE_API_KEY ak TACOTRANSLATE_PROJECT_LOCALE byento.

Lè ou kreye kliyan an nan yon dosye apa, li vin fasil pou itilize li ankò pita. getLocales se jis yon fonksyon utilite ki gen kèk jesyon erè entegre. Koulye a, kreye yon dosye ki rele /app/[locale]/tacotranslate.tsx, kote n ap aplike founisè TacoTranslate.

'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>
	);
}

Remake 'use client'; ki endike ke sa a se yon konpozan kliyan.

Kounye a ke founisè kontèks la pare pou itilize, kreye yon fichye ki rele /app/[locale]/layout.tsx, layout rasin nan aplikasyon nou an. Remake chemen sa a gen yon katab ki itilize Dynamic Routes, kote [locale] se paramèt dinamik la.

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>
	);
}

Premye bagay pou remake isit la se ke n ap itilize paramèt Dynamic Route nou an [locale] pou rekipere tradiksyon pou lang sa a. Anplis, generateStaticParams ap asire tout kòd lokal ou aktive pou pwojè ou a pre-rann.

Kounye a, ann konstwi premye paj nou an! Kreye yon fichye ki rele /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!" />
	);
}

Remake varyab revalidate la ki fè Next.js rebati paj la apre 60 segonn, epi kenbe tradiksyon ou yo ajou.

Etap 4: Mete an plas rann sou bò sèvè a

TacoTranslate sipòte rann sou bò sèvè a. Sa amelyore anpil eksperyans itilizatè a paske li montre kontni tradui a touswit, olye pou itilizatè a wè an premye kontni ki poko tradui. Anplis, nou ka evite fè demann rezo sou bò kliyan an, paske nou deja gen tradiksyon nou bezwen pou paj la itilizatè a ap wè.

Pou mete an plas rann sou bò sèvè a, kreye oswa modifye /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};
};

Modifye chèk isProduction la pou adapte li ak konfigirasyon ou. Si true, TacoTranslate ap afiche kle API piblik la. Si nou nan yon anviwònman lokal, tès, oswa staging (isProduction is false), n ap itilize kle API sekrè read/write la pou asire nouvo chenn yo voye pou tradiksyon.

Pou asire ke routaj ak redireksyon mache jan yo espere a, n ap bezwen kreye yon fichye ki rele /middleware.ts. Lè nou itilize Middleware, nou ka redirekte itilizatè yo sou paj ki prezante nan lang yo prefere a.

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);
}

Asire w mete matcher la an akò ak Dokimantasyon Middleware Next.js.

Sou bò kliyan an, ou ka modifye cookie locale la pou chanje lang preferab itilizatè a. Tanpri gade kòd egzanp konplè a pou ide sou kijan pou fè sa!

Etap 5: Mete an pwodiksyon epi teste!

Nou fini! Aplikasyon React ou a kounye a pral tradui otomatikman lè ou ajoute nenpòt chèn nan yon konpozan Translate. Remake ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ap kapab kreye nouvo chèn pou tradui. Nou rekòmande pou gen yon anviwònman staging fèmen e ki an sekirite kote ou ka teste aplikasyon pwodiksyon ou ak yon kle API konsa, epi ajoute nouvo chèn anvan ou pibliye. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou, epi potansyèlman gonfle pwojè tradiksyon ou a pa ajoute nouvo chèn ki pa gen rapò.

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!