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

Kòm mond lan ap vin pi globalize, li vin de pli zan pli enpòtan pou devlopè entènèt yo bati aplikasyon ki kapab sèvi itilizatè ki soti nan diferan peyi ak kilti. Youn nan fason prensipal pou reyalize sa se atravè entènasyonalizasyon (i18n), ki pèmèt ou adapte aplikasyon ou an nan 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, avèk rann sou bò sèvè. TL;DR: Wè 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 pito.

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 tradui otomatikman chenn karaktè ou yo nan nenpòt lang itilize entèlijans atifisyèl avanse, epi li libere ou anba jesyon fatigan fichye JSON yo.

Ann enstale li avèk 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. Sa gratis, epi li pa obligatwa pou w ajoute yon kat kredi.

Nan koòdone itilizatè aplikasyon TacoTranslate a, 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è ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pou pa janm kite kòd sekrè read/write API a jwenn 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 lang defo pou retounen si pa gen tradiksyon. Nan egzanp sa a, n ap mete li kòm en pou angle.
• TACOTRANSLATE_ORIGIN: “Katab” kote chèn ou yo ap estoke, tankou URL sit entènèt ou a. 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 defini TACOTRANSLATE_API_KEY otomatikman byento.

Kreye kliyan an nan yon fichye separe fè li pi fasil pou itilize ankò pita. Kounye a, lè w ap 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 genyen pageProps ak _app.tsx, tanpri elaji definisyon an ak pwopriyete ak kòd ki anwo a.

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

TacoTranslate pèmèt rann sèvè bò kote tradiksyon ou yo. Sa amelyore anpil eksperyans itilizatè a pa montre kontni tradui a imedyatman, olye ke yon eklatman kout nan kontni ki pa tradui anvan. Anplis, nou ka evite 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 chèk isProduction pou adapte l 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), n ap itilize kle sekrè read/write API a pou asire nouvo strings yo voye pou tradiksyon.

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

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

Pou sèvi ak 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!"/>;
}

Kounye a ou ta dwe 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 ap kounye a tradui otomatikman lè ou ajoute nenpòt fisèl nan yon Translate konpozan. Remake byen ke se sèlman anviwònman ki gen pèmisyon read/write sou kle API a ki ap kapab kreye nouvo fisèl pou tradwi. Nou rekòmande pou gen yon anviwònman staging fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou avèk yon kle API konsa, ajoute nouvo fisèl anvan ou ale an dirèk. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi tou evite projè tradiksyon ou an vin gonfle avèk nouvo fisèl ki pa gen rapò.

Asire w wè egzanp konplè a sou pwofil GitHub nou an. La a, ou pral jwenn tou yon egzanp sou kijan pou fè sa lè l sèvi avèk App Router la! Si ou rankontre nenpòt pwoblèm, ezite kontakte nou, epi n ap plis pase kontan ede w.

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