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

Pandan mond lan ap vin plis e plis globalize, li vin pi enpòtan pou devlopè wèb yo konstwi aplikasyon ki ka satisfè 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 nan 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 sèvè a. TL;DR: Gade egzanp konplè a isit la.

Gid sa a se pou aplikasyon Next.js ki 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 otomatikman chenn ou yo nan nenpòt lang lè l sèvi avèk yon AI avanse, epi li libere ou anba jere dosye JSON ki fatigan.

Ann enstale li lè l sèvi avèk npm nan tèminal ou:

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

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

Nan koòdone aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan tab kle API li yo. Kreye yon kle read ak yon kle read/write. N ap 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 ka ajoute yo nan yon fichye .env nan rasin pwojè ou an.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pou pa janm lage kle API sekrè read/write nan anviwònman pwodiksyon bò kliyan an.

N ap ajoute tou de lòt varyab anviwònman: TACOTRANSLATE_DEFAULT_LOCALE ak TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lang default ki pral itilize kòm rezèv. Nan egzanp sa a, n ap mete li a en pou lang angle.
• TACOTRANSLATE_ORIGIN: "Katab" kote chenn tèks ou yo ap estoke, tankou URL sit entènèt ou. Li plis sou orijin yo isit la.

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

Etap 3: Konfigirasyon TacoTranslate

Pou entegre TacoTranslate avèk aplikasyon ou a, w ap bezwen kreye yon kliyan lè l sèvi avèk kle API yo soti pi bonè. Pa egzanp, kreye yon dosye 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 talè konsa.

Kreye kliyan an nan yon dosye apa fè li fasil pou itilize ankò pita. getLocales se yon fonksyon èd sèlman ak kèk jesyon erè entegre. Kounye 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.

Avèk founisè kontèks la pare kounye a, kreye yon fichye ki rele /app/[locale]/layout.tsx, ki se layout rasin nan nan aplikasyon nou an. Remake byen ke chimen sa a genyen yon dosye 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 nou ap itilize paramèt Dynamic Route nou an [locale] pou chwazi tradiksyon pou lang sa a. Anplis, generateStaticParams ap asire ke tout kòd kote ou aktive pou pwojè ou a ap pre-rend.

Kounye a, ann bati 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!" />
	);
}

Sonje variab revalidate la ki di Next.js pou rebati paj la apre 60 segonn, epi kenbe tradiksyon ou yo ajou.

Pa 4: Aplike rannman bò sèvè a

TacoTranslate sipòte rann sèvè bò kote. Sa amelyore anpil eksperyans itilizatè a pa montre kontni an tradui imedyatman, olye yon flash kontni ki pa tradui an premye. Anplis de sa, nou ka evite demann rezo sou kliyan an, paske nou deja gen tradiksyon nou bezwen pou paj itilizatè a ap gade a.

Pou configured 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 tcheke isProduction pou adapte ak konfigirasyon ou. Si true, TacoTranslate pral itilize 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 pou asire nouvo chenn yo voye pou tradiksyon.

Pou asire ke routaj ak redireksyon mache jan yo espere a, n ap bezwen kreye yon dosye ki rele /middleware.ts. Lè w itilize Middleware, nou ka redireksyon itilizatè yo nan 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 an plas matcher an selon Dokumentasyon Middleware Next.js.

Sou kliyan an, ou ka chanje biskwit locale la pou modifye ki lang itilizatè a prefere. Tanpri wè kòd egzanp konplè a pou jwenn ide sou kijan pou fè sa!

Etap 5: Déplwaye epi teste!

Nou fini! Aplikasyon React ou a ap kounye a tradui otomatikman lè ou ajoute nenpòt kòd nan yon konpozan Translate. Remake ke selman anviwònman ki gen pèmisyon read/write sou kle API a ap kapab kreye nouvo chenn pou tradui. Nou rekòmande pou gen yon anviwònman etapman fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou avèk yon kle API konsa, ajoute nouvo chenn avan ou ale an dirèk. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou, e potansyèlman anfle pwojè tradiksyon ou pa ajoute nouvo chenn 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!