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

Kòm mond lan ap vin pi plis 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. Yonn nan prensipal fason pou reyalize sa a se atravè entènasyonalizasyon (i18n), ki pèmèt ou adapte aplikasyon ou a ak diferan lang, lajan, ak fòma dat.

Nan tutoriel sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, avèk rannaj 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 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 ou yo nan nenpòt lang avèk èd entèlijans atifisyèl avanse, epi li libere ou kont jere dosye JSON ki fatigan.

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

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

Kounye a ke ou 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 ou ajoute yon kat kredi.

Nan entèfas itilizatè aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan onglet kle API li yo. Kreye yon sèl kle read, epi yon sèl kle read/write. Nou pral sove yo kòm varyab anviwònman. Kle read la se sa nou rele public e kle read/write la se secret. Pa egzanp, ou ta ka ajoute yo nan yon dosye .env nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pa janm kite sekrè read/write kle API 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 defo pou retou. Nan egzanp sa a, n ap mete l kòm en pou lang angle.
• TACOTRANSLATE_ORIGIN: “Katab” kote chenn karaktè ou yo ap estoke, tankou URL sitwèb 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è w itilize kle API yo soti pi bonè. 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

N ap otomatikman defini TACOTRANSLATE_API_KEY byento.

Kreyasyon kliyan an nan yon fichye apa 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 gen pageProps ak _app.tsx koutim, tanpri elaji definisyon an ak pwopriyete yo ak kòd ki anwo a.

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

TacoTranslate pèmèt rann sou bò sèvè pou tradiksyon ou yo. Sa amelyore anpil eksperyans itilizatè a pa montre kontni tradui imedyatman, olye pou gen yon flash kontni ki pa tradui an premye. 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 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 ki sipòte yo. Pwochen bagay nou pral fè se chèche tradiksyon pou tout paj ou yo. Pou fè sa, w ap itilize swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps selon sa ou bezwen.

Fonksyon sa yo pran twa agiman: Youn se yon objè Next.js Static Props Context, konfigirasyon pou TacoTranslate, ak pwopriyete opsyonèl Next.js. Note ke revalidate sou getTacoTranslateStaticProps fikse a 60 kòm default, konsa tradiksyon ou yo ap toujou ajou.

Pou itilize nenpòt 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 kapab itilize konpozan Translate kounye a pou tradui chenn karaktè 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 chèn nan yon Translate konpozan. Remake byen ke 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 etapman fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou avèk yon kle API konsa, ajoute nouvo chèn anvan ou ale an direk. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi petèt anfli pwojè tradiksyon ou a pa ajoute nouvo chèn ki pa gen rapò.

Asirew ou gade egzanp konplè a sou pwofil GitHub nou an. La a, w ap jwenn tou yon egzanp sou kijan pou fè sa itilize App Router a! Si ou rankontre nenpòt pwoblèm, tanpri kontakte nou, epi n ap plis pase kontan pou ede w.

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