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

Pandan 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 w lan a diferan lang, lajan, ak fòma dat.

Nан atik sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a ak rendu 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 pito.

Etap 1: Enstale yon bibliyotèk i18n

Pou aplike entènasyonalizasyon nan aplikasyon Next.js ou a, n ap 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 tèks ou yo nan nenpòt lang lè l sèvi avèk entèlijans atifisyèl avanse, epi li libere w anba jesyon fatigan dosye JSON yo.

Ann enstale li ak npm nan tèminal ou:

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

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

Nan entèfas aplikasyon TacoTranslate la, kreye yon pwojè, epi navige sou tab 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è ou.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal defo ki itilize kòm ranplasman. Nan egzanp sa a, n ap mete li sou en pou Anglè.
• TACOTRANSLATE_ORIGIN: “folder” kote tèks ou yo pral estoke, tankou URL sitwèb ou a. Li plis sou origin 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 kliyan ki itilize kle API yo ki te kreye 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 byento.

Kreye kliyan an nan yon fichye separe fè li fasil pou itilize li ankò pita. getLocales se jis yon fonksyon itilite ak kèk mekanis entegre pou jere erè. Koulye a, kreye yon fichye ki rele /app/[locale]/tacotranslate.tsx, kote n ap enplemante 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 sou bò kliyan an.

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 ke 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 nou ap itilize paramèt Dynamic Route nou an [locale] pou rekipere tradiksyon pou lang sa a. Anplis de sa, generateStaticParams ap asire ke tout kòd lokal ou te aktive pou pwojè ou a pre-rann.

Kounye a, ann bati premye paj nou an! Kreye yon dosye 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 varyab revalidate la ki fè Next.js rebati paj la apre 60 segonn, epi kenbe tradiksyon ou yo ajou.

Etap 4: Mete an plas randerizasyon sou sèvè

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

Pou konfigire rander 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 verifikasyon isProduction la pou li adapte ak konfigirasyon ou. Si true, TacoTranslate ap montre 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 tèks yo voye pou tradiksyon.

Pou asire routage ak redireksyon mache jan yo espere a, n ap bezwen kreye yon dosye ki rele /middleware.ts. Lè nou itilize Middleware, nou ka redirije itilizatè yo vè paj ki parèt 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 pou w mete matcher ann akò ak Dokimantasyon sou Middleware Next.js.

Sou bò kliyan an, ou ka chanje bonbon locale la pou chanje lang preferans itilizatè a. Tanpri gade egzanp kòd konplè a pou 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 chenn nan yon Translate konpozan. Sonje ke se sèlman anviwònman ki gen pèmisyon read/write sou kle API a ki ap kapab kreye nouvo chenn pou tradui. Nou rekòmande pou genyen yon anviwònman staging fèmen ak an sekirite kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, epi ajoute nouvo chenn anvan ou mete li an pwodiksyon. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou, epi potansyèlman gonfle pwojè tradiksyon ou a 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!