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

Pandan mond lan ap vin pi plis globalize, li vin pi enpòtan pou devlopè entènèt yo konstwi aplikasyon ki kapab satisfè itilizatè ki soti nan diferan peyi ak kilti. Yonn 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òma dat.

Nan atik sa a, n ap eksplore kijan pou ajoute entè-nasyonalizasyon nan aplikasyon React Next.js ou a, avèk rann ki fèt sou bò sèvè. 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 olye de sa.

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 otomatikman tradwi chenn ou yo nan nenpòt lang lè l sèvi avèk AI ki pi avanse, epi li libere ou de jere dosye JSON yo ki fatigan.

An n enstale li itilize npm nan tèminal 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, epi ou pa bezwen ajoute yon kat kredi.

Nan entèfas itilizatè aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan onglet kle API li yo. Kreye yon kle read, epi yon lòt 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 ka ajoute yo nan yon fichye .env nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pa janm kite kle API sekrè read/write a soti 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 ranplasman. Nan egzanp sa a, n ap mete li sou en pou lang angle.
• TACOTRANSLATE_ORIGIN: “Katab” kote kòd ou yo ap estoke, tankou URL sitwèb ou. Li plis sou sous yo isit la.

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

Etap 3 : Konfigire TacoTranslate

Pou entegre TacoTranslate ak aplikasyon ou an, ou pral bezwen kreye yon kliyan lè l sèvi avèk kle API yo soti anvan. 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 fichye separe fè li fasil pou itilize ankò pita. getLocales se jis yon fonksyon itilite ak kèk jesyon erè ki entegre. Kounye a, kreye yon fichye 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 pran tradiksyon pou lang sa a. Anplis de sa, generateStaticParams ap asire tout kòd lokal ou aktive pou pwojè ou an yo pre-rand.

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 ki di Next.js pou re-bati paj la apre 60 segonn, epi kenbe tradiksyon ou yo a jou.

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

TacoTranslate sipòte rann kote sèvè a. Sa amelyore anpil eksperyans itilizatè a pa montre kontni ki tradui imedyatman, olye de yon eklèsi 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 vizite a.

Pou konfigire rannman bò sèvè, 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 matche ak anviwònman ou. Si true, TacoTranslate ap 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 la pou asire nouvo fisèl yo voye pou tradiksyon.

Pou asire ke routaj ak redireksyon ap travay jan yo espere a, nou pral bezwen kreye yon fichye ki rele /middleware.ts. Lè w itilize Middleware, nou kapab redirije itilizatè yo vè 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 kanpe matcher an ann akò avèk Dokumentasyon Middleware Next.js.

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

Etap 5: Pibliye epi teste!

Nou fini! Aplikasyon React ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt kòd nan yon konpozan Translate. Sonje ke sèl anviwònman ki gen pèmisyon read/write sou kle API a ki pral kapab kreye nouvo kòd pou tradui. Nou rekòmande pou ou gen yon anviwònman staging fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, ajoute nouvo kòd anvan ou lanse sou entènèt. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi evite pwoblèm nan pwojè tradiksyon ou a pa ajoute nouvo kòd 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!