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

Pandan mond lan ap vin pi globalize, li vin pi enpòtan pou devlopè entènèt yo bati aplikasyon ki ka satisfè bezwen itilizatè soti nan diferan peyi ak kilti. Youn nan fason kle pou reyalize sa se atravè internationalization (i18n), ki pèmèt ou adapte aplikasyon w lan ak diferan lang, lajan, ak fòma dat.

Nan atik sa a, nou pral eksplore kijan pou ajoute internationalization nan aplikasyon React Next.js ou a, avèk rann sèvè bò 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, n ap premye chwazi yon bibliyotèk i18n. Gen plizyè bibliyotèk popilè, tankou next-intl. Sepandan, nan egzanp sa a, n ap itilize TacoTranslate.

TacoTranslate tradui otomatikman fraz ou yo nan nenpòt lang lè l sèvi avèk yon AI avanse, epi li libere ou anba jesyon fatigan fichye JSON yo.

An n 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 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 li pa mande pou ou ajoute yon kat kredi.

Nan entèfas itilizatè aplikasyon TacoTranslate lan, kreye yon pwojè, epi navige nan onglè kle API li yo. Kreye yon kle read, epi 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 ki nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pou w pa janm kite kle API sekrè read/write a filtre 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 defo pou ranplasan. Nan egzanp sa a, nou pral mete li sou en pou lang Angle.
• TACOTRANSLATE_ORIGIN: “Katab” kote fisèl ou yo ap estoke, tankou adrès URL sit entènèt ou. Li plis sou orijin isit la.

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

Etap 3: Mete TacoTranslate kanpe

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 separe fè li fasil yo sèvi ak ankò pita. getLocales se jis yon fonksyon sèvis piblik ak kèk manyen erè bati-an erè. Koulye a, kreye yon dosye yo te rele /app/[locale]/tacotranslate.tsx, kote nou pral aplike founisè a 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.

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

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

Etap 4: Aplike rann sou bò sèvè a

TacoTranslate sipòte rannman bò sèvè. Sa amelyore anpil eksperyans itilizatè a pa montre kontni tradui imedyatman, olye pou gen yon ekla 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 mete kanpe rann sou bò sèvè a, kreye oubyen 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 ke routaj ak redireksyon fèt jan yo espere a, nou pral bezwen kreye yon fichye ki rele /middleware.ts. Lè nou itilize Middleware, nou kapab 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 w mete kanpe matcher an ann akò avèk Dokimantasyon Middleware Next.js.

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

Etap 5: Pibliye epi teste!

Nou fini! Aplikasyon React ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt chèn nan yon konpozan Translate. Remake byen ke se sèlman anviwònman ki gen pèmisyon read/write sou kle API a ki pral kapab kreye nouvo chèn pou tradui. Nou rekòmande pou gen yon anviwònman staging ki fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou avèk yon kle API konsa, ajoute nouvo chèn anvan ou pibliye. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi potansyèlman anplifye pwojè tradiksyon ou a pa ajoute nouvo chèn ki pa gen rapò.

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

TacoTranslate pèmèt ou lokalize aplikasyon React ou yo otomatikman vit e byen tounen nan nenpòt lang. Kòmanse jodi a!