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

Pandan mond lan ap vin pi globalize, li vin de pli enpòtan pou devlopè entènèt yo kreye aplikasyon ki ka satisfè itilizatè ki sòti 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 diferan lang, lajan, ak fòm dat.

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

Gid sa a se pou aplikasyon Next.js ki ap itilize App Router.
Si w ap itilize Pages Router, gade gid sa a olye.

Etap 1: Enstale yon bibliyotèk i18n

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

TacoTranslate otomatikman tradui chèn ou yo nan nenpòt lang itilize entèlijans atifisyèl avanse, epi li libere ou soti nan jere dosye JSON ki fatigan.

Ann enstale li itilize npm nan terminal ou:

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

Kounye a ke ou fin 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 li pa mande ou ajoute yon kat kredi.

Nan entèfas aplikasyon TacoTranslate la, kreye yon pwojè, epi navige nan 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 fichye .env nan rasin pwojè w la.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pou pa janm lage kle API read/write sekrè a 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 lokal default pou retou. Nan egzanp sa a, n ap mete li sou en pou Angle.
• TACOTRANSLATE_ORIGIN: "Katab" kote strings ou yo ap estoke, tankou URL sit wè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è l sèvi avèk 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 talè konsa.

Kreye kliyan an nan yon fichye diferan fè li fasil pou itilize ankò pita. getLocales se jis yon fonksyon itil ki gen kèk manyen erè tou entegre. Kounye a, kreye yon fichye ki rele /app/[locale]/tacotranslate.tsx, kote n ap aplike [TacoTranslate provider.

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

Ak founisè kontèks la pare pou itilize, kreye yon fichye ki rele /app/[locale]/layout.tsx, layout rasin nan nan aplikasyon nou an. Remake ke chemen sa a gen yon dosye 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 ap itilize paramèt Dynamic Route nou an [locale] pou pran tradiksyon pou lang sa a. Anplis, generateStaticParams ap asire ke tout kòd lokal ou aktive pou pwojè ou a pre-rann.

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

Note revalidate varyab ki di Next.js pou re-bati paj la apre 60 segonn, epi kenbe tradiksyon ou yo ajou.

Etap 4: Aplikasyon rannaj sou sèvè a

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

Pou configuré rann sou 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 tès isProduction lan pou l adapte ak anviwònman ou. Si true, TacoTranslate ap montre 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 pou asire nouvo chenn yo voye pou tradiksyon.

Pou asire w ke wout ak redireksyon ap mache jan li espere a, n ap bezwen kreye yon dosye ki rele /middleware.ts. Avèk Middleware, nou ka redireksyon 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 ou mete sou pye matcher an an akò avèk dokimantasyon Next.js Middleware.

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

Etap 5: Pibliye epi teste!

Nou fini! Aplikasyon React ou a ap kounye a tradui otomatikman lè ou ajoute nenpòt chèn nan yon konpozan Translate. Remake byen 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 ki fèmen ak an sekirite kote ou ka teste aplikasyon pwodiksyon ou avèk yon kle API konsa, ajoute nouvo chèn anvan ou lanse li. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou, epi evite pwobableman grandi twòp pwojè tradiksyon ou a pa ajoute nouvo chèn ki pa gen rapò.

Asire w pou gade egzanp konplè a sou pwofil GitHub nou an. La a, w ap jwenn tou yon egzanp sou kijan pou fè sa itilize Pages Router la! Si ou rankontre nenpòt pwoblèm, pa ezite kontakte nou, nou pral plis pase kontan ede w.

TacoTranslate pèmèt ou lokalize aplikasyon React ou yo otomatikman, rapidman nan nenpòt lang ale ak tounen. Kòmanse jodi a!