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

Antanke mond lan ap vin pi globalize, li vin de pli zan pli enpòtan pou devlopè entènèt yo bati 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 diferan lang, lajan, ak fòma dat.

Nan leson patikilye sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, ak rann sou 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, nou pral itilize TacoTranslate.

TacoTranslate tradui tèks ou yo otomatikman nan nenpòt lang lè l sèvi avèk entèlijans atifisyèl avanse, epi li elimine bezwen pou jere fichye JSON ki fatigan yo.

Ann enstale li lè w itilize npm nan tèminal ou a:

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

Kounye a ke ou gen modil la enstale, li lè pou w kreye kont TacoTranslate ou, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, e pa mande pou ou ajoute yon kat kredi.

Nan entèfas aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan onglè kle API li yo. Kreye yon read kle, ak yon read/write kle. N ap 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 .env file nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pa janm revele kle API sekrè read/write la nan anviwònman pwodiksyon bò kliyan.

Nou pral tou ajoute de lòt varyab anviwònman: TACOTRANSLATE_DEFAULT_LOCALE ak TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal defo pou ranplasman. Nan egzanp sa a, nou pral mete li sou en pou angle.
• TACOTRANSLATE_ORIGIN: "katab" kote tèks ou yo pral 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: Konfigire TacoTranslate

Pou entegre TacoTranslate ak aplikasyon w lan, w ap bezwen kreye yon kliyan lè w itilize kle API yo ke ou te kreye 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;

Nou pral otomatikman defini TACOTRANSLATE_API_KEY talè konsa.

Kreye 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 pwòp pageProps ak _app.tsx, tanpri elaji definisyon an ak pwopriyete yo ak kòd ki pi wo a.

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

TacoTranslate pèmèt rann sou bò sèvè pou tradiksyon ou yo. Sa amelyore eksperyans itilizatè a anpil pa montre kontni tradui imedyatman, olye pou gen yon kout klere kote kontni ki pa tradui parèt an premye. Anplis, nou ka evite fè demann rezo sou bò kliyan an, paske nou deja gen tout tradiksyon nou bezwen yo.

Nou pral 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 tcheke isProduction la pou adapte li ak konfigirasyon ou. Si true, TacoTranslate ap afiche 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 te mete aplikasyon Next.js la kanpe ak yon lis lang ki sipòte. Pwochen etap la se rekipere tradiksyon pou tout paj ou yo. Pou fè sa, ou pral itilize swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps selon bezwen ou.

Fonksyon sa yo pran twa agiman: Youn Next.js Static Props Context objè, konfigirasyon pou TacoTranslate, ak pwopriyete Next.js opsyonèl. Remake ke revalidate sou getTacoTranslateStaticProps mete sou 60 pa defo, konsa tradiksyon ou yo rete 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!"/>;
}

Kounye a, ou ta dwe kapab itilize Translate konpozan an pou tradui chenn tèks nan tout konpozan React ou yo.

import {Translate} from 'tacotranslate/react';

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

Etap 5: Deplwaye epi teste!

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

Asire w pou w tcheke egzanp konplè a sou pwofil GitHub nou an. La a, w ap jwenn tou yon egzanp sou kijan pou fè sa lè w itilize App Router ! Si w rankontre nenpòt pwoblèm, pa ezite kontakte nou, e n ap plis pase kontan ede w.

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