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

Kòm mond lan vin pi globalize, li vin pi enpòtan pou devlopè entènèt yo bati 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 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 fèt 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 enplemante 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, nou pral 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 lè w sèvi ak 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, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, e li pa mande pou ou ajoute yon kat kredi.

Nan entèfas itilizatè aplikasyon TacoTranslate la, kreye yon pwojè, epi navige nan onglet kle API li a. Kreye yon kle read, epi 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 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 nan anviwònman pwodiksyon bò kliyan an.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal defo ki sèvi kòm ranplasman. Nan egzanp sa a, n ap mete li sou en pou Angle.
• TACOTRANSLATE_ORIGIN: “katab” kote chenn ou yo pral 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: Konfigire TacoTranslate

Pou entegre TacoTranslate ak aplikasyon ou a, w ap bezwen kreye yon kliyan ki 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.

Kreye kliyan an nan yon dosye apa fè li fasil pou itilize ankò pita. getLocales se jis yon fonksyon itilite ki gen kèk jesyon erè entegre. Kounye a, kreye yon dosye ki rele /app/[locale]/tacotranslate.tsx, kote n ap implemante 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 k ap 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 itilize paramèt Dynamic Route nou an [locale] pou chache tradiksyon pou lang sa a. Anplis, generateStaticParams ap asire ke tout kòd lokal ou te aktive pou pwojè ou a yo rann davans.

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!" />
	);
}

Pran nòt sou varyab revalidate 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è

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

Pou mete sou pye 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 l adapte ak konfigirasyon ou. Si true, TacoTranslate ap ekspoze kle API piblik la. Si nou nan yon anviwònman lokal, tès, oswa staging (isProduction is false), nou pral itilize kle API sekrè read/write la pou asire nouvo chenn tèks yo voye pou tradiksyon.

Pou asire w ke routaj ak redireksyon ap mache jan yo dwe a, n ap bezwen kreye yon dosye ki rele /middleware.ts. Lè nou itilize Middleware, nou ka redireje 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 dokumentasyon Middleware Next.js.

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

Etap 5: Deplwaye epi teste!

Nou fini! Aplikasyon React ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt tèks nan yon Translate konpozan. Sonje ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ap kapab kreye nouvo tèks ki pral tradui. Nou rekòmande pou gen yon anviwònman staging fèmen e an sekirite kote ou ka teste aplikasyon pwodiksyon ou a avèk yon kle API konsa, pou w ajoute nouvo tèks anvan ou mete li an pwodiksyon. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi potansyèlman anfle pwojè tradiksyon ou a pa ajoute nouvo tèks 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!