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

Pandan mond lan ap vin pi globalize, li vin pi enpòtan pou devlopè entènèt yo kreye 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 tutoryèl sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, ak rannman bò sèvè. TL;DR: Gade egzanp konplè a isit la.

Gid sa a se pou aplikasyon Next.js ki ap itilize Pages Router.
Si w ap itilize App Router, tanpri 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. Sepandan, nan egzanp sa a, n ap itilize TacoTranslate.

TacoTranslate otomatikman tradui chèn ou yo nan nenpòt lang lè l sèvi avèk entèlijans atifisyèl avanse, epi li libere ou soti nan jesyon fatigan dosye JSON yo.

Ann enstale li avèk npm nan tèminal ou:

npm install tacotranslate

Etap 2 : Kreye yon kont TacoTranslate gratis

Koulye 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, kreye yon pwojè, epi ale nan 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 pa janm kite kle read/write API sekrè 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 retounen la. Nan egzanp sa a, n ap mete li kòm en pou Anglè.
• TACOTRANSLATE_ORIGIN: “Katab” kote chenn karaktè ou yo ap 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: Konfigirasyon TacoTranslate

Pou entegre TacoTranslate ak aplikasyon ou a, ou pral bezwen kreye yon kliyan lè l sèvi avèk kle API yo soti pi bonè. Pa egzanp, kreye yon fichye yo 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

N ap otomatikman defini TACOTRANSLATE_API_KEY byento.

Kreye kliyan an nan yon dosye ki separe fè li pi fasil pou itilize ankò pita. Kounye a, lè w itilize yon /pages/_app.tsx koutim, n ap ajoute founisè TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Si ou deja gen pageProps ak _app.tsx pèsonalize, tanpri elaji definisyon an avèk pwopriyete yo ak kòd ki anwo a.

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

TacoTranslate pèmèt rann kote sèvè nan tradiksyon ou yo. Sa amelyore eksperyans itilizatè a anpil pa montre kontni ki tradui a imedyatman, olye de yon flashing kontni ki pa tradui an premye. Anplis de sa, nou ka sote demann rezo sou kliyan an, paske nou deja gen tout tradiksyon nou bezwen yo.

N ap kòmanse pa kreye oswa modifye /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Modifye tès isProduction lan pou adapte l 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 chenn yo voye pou tradiksyon.

Jiska kounye a, nou sèlman mete aplikasyon Next.js la ak yon lis lang li sipòte yo. Pwochen bagay nou pral fè se rale tradiksyon pou tout paj ou yo. Pou fè sa, ou pral itilize swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps selon kondisyon ou yo.

Fonksyon sa yo pran twa agiman: Youn se yon objè Next.js Static Props Context, konfigirasyon pou TacoTranslate, ak pwopriyete Next.js opsyonèl. Remake ke revalidate sou getTacoTranslateStaticProps mete sou 60 pa default, pou tradiksyon ou yo rete ajou.

Pou itilize youn nan fonksyon sa yo nan yon paj, ann sipoze ou gen yon fichye paj tankou /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Ou ta dwe kounye a kapab itilize konpozan Translate la pou tradui fisèl nan tout konpozan React ou yo.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

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 Translate konpozan. Remake ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ki kapab kreye nouvo kòd pou tradui. Nou rekòmande gen yon anviwònman etapman fèmen ak an sekirite kote ou ka teste aplikasyon pwodiksyon ou avèk yon kle API konsa, ajoute nouvo kòd anvan ou ale sou entènèt. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou, epi potansyèlman anfle pwojè tradiksyon ou a pa ajoute nouvo kòd 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 lè w ap itilize App Router! Si w rankontre nenpòt pwoblèm, santi w lib pou kontakte nou, e n ap plis pase kontan ede w.

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