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

Pandan mond lan ap vin pi globalize, li vin pi 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 tutoryèl sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, ak 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 olye de sa.

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 fisèl ou yo nan nenpòt lang lè l sèvi avèk AI dènye kri, epi li libere ou nan jesyon fatigan fichye JSON yo.

Ann enstale li itilize 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 w kreye kont TacoTranslate ou, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Sa gratis, epi pa mande ou ajoute yon kat kredi.

Nan koòdone aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan onglè 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 pa janm fè kle API sekrè read/write fwape 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, n ap mete li sou en pou angle.
• 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: Konfigire TacoTranslate

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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

N ap defini TACOTRANSLATE_API_KEY otomatikman byento.

Kreye kliyan an nan yon dosye 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 pèsonalize, tanpri pwolonje definisyon an ak pwopriyete ak kòd ki soti anlè a.

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

TacoTranslate pèmèt rann sou bò sèvè nan tradiksyon ou yo. Sa amelyore eksperyans itilizatè a anpil pa montre kontni tradui imedyatman, olye de yon klere rapid kontni ki pa tradui an premye. Anplis, 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 tchek isProduction la pou adapte li 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 te sèlman mete aplikasyon an Next.js moute ak yon lis lang sipòte. Pwochen bagay nou pral fè se tradiksyon pwepare pou tout paj ou yo. Pou fè sa, ou pral sèvi ak swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps ki baze sou kondisyon ou yo.

Fonksyon sa yo pran twa agiman: Youn Next.js Static Props Context objè, konfigirasyon pou TacoTranslate, ak pwopriyete Next.js si ou Next.js. Remake byen ke revalidate sou getTacoTranslateStaticProps mete a 60 pa default, se konsa ke tradiksyon ou rete moute-a-dat.

Pou itilize swa fonksyon nan yon paj, kite a asime ou te gen yon dosye 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 chenn karaktè nan tout konpozan React ou yo.

import {Translate} from 'tacotranslate/react';

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

Etap 5: Depwaye epi teste!

Nou fini! Aplikasyon React ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt chèn nan yon Translate konpozan. Note byen ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ki kapab kreye nouvo chèn pou tradui. Nou rekòmande pou genyen 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 mete l an dirèk. Sa ap anpeche 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 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 la! Si w rankontre nenpòt pwoblèm, pa ezite kontakte nou, epi n ap plis pase kontan pou ede w.

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