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

Pandan 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 w lan 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 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, n ap premye chwazi yon bibliyotèk i18n. Gen plizyè bibliyotèk popilè, enkli next-intl. Sepandan, nan egzanp sa a, n ap itilize TacoTranslate.

TacoTranslate otomatikman tradui chenn ou yo nan nenpòt lang lè l sèvi avèk AI avanse, epi li libere ou soti 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 enstale modil la, li lè pou kreye kont TacoTranslate ou, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, e ou pa bezwen ajoute yon kat kredi.

Nan entèfas aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan tab kle API li a. 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 .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 an.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal de baz pou itilize kòm rezèv. Nan egzanp sa a, n ap mete li sou en pou Anglè.
• TACOTRANSLATE_ORIGIN: Katab kote tèks ou yo ap estoke, tankou URL sitwèb ou. Li plis sou orijin yo isit la.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Etap 3: Konfigire TacoTranslate

Pou entegre TacoTranslate nan aplikasyon ou, w ap bezwen kreye yon kliyan ki sèvi ak kle API yo soti pi bonè a. 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 defini TACOTRANSLATE_API_KEY otomatikman talè.

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, nou pral ajoute founisè TacoTranslate la.

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 ak pwopriyete yo ak kòd ki pi wo a.

Etap 4: Mete an plas rann sou bò sèvè

TacoTranslate pèmèt rann tradiksyon ou yo sou bò sèvè. Sa amelyore anpil eksperyans itilizatè a paske li montre kontni tradui a touswit, olye pou itilizatè a wè yon ti moman kontni ki pa tradui anvan. Anplis, nou ka evite fè demann rezo sou kliyan an, paske nou deja genyen 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 verifikasyon isProduction la pou adapte li ak konfigirasyon ou. Si true, TacoTranslate ap fè kle API piblik la parèt. 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 ke nouvo chenn karaktè yo voye pou tradiksyon.

Jiskaprezan, nou sèlman te mete aplikasyon Next.js la ak yon lis lang ki sipòte yo. Sa k ap vini an se al chèche tradiksyon pou tout paj ou yo. Pou fè sa, ou pral itilize swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps selon bezwen ou yo.

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, pou tradiksyon ou yo rete ajou.

Pou itilize youn oswa lòt fonksyon an sou 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 karaktè 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 nan yon Translate konpozan. Remake ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ap kapab kreye nouvo chèn pou tradui. Nou rekòmande pou genyen yon anviwònman staging fèmen ak an sekirite kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, ajoute nouvo chèn anvan lansman. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi potansyèlman anfle pwojè tradiksyon ou a pa ajoute nouvo chèn ki pa gen rapò.

Asire w pou w 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 ou rankontre nenpòt pwoblèm, pa ezite kontakte nou, n ap plis pase kontan ede w.

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