Pi bon solisyon pou entènasyonalizasyon (i18n) nan aplikasyon Next.js yo

Kijan li fonksyone

Pandan mond lan ap vin pi plis 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 kle fason pou reyalize sa se atravè internationalization (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 internationalization nan aplikasyon React Next.js ou a, ak rendu sou sèvè a. 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, nou pral 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 chèn ou yo nan nenpòt lang lè l sèvi avèk yon entèlijans atifisyèl avanse, epi li libere ou anba jesyon fatigan dosye JSON.

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

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

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

Nan koòdone aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan onglet kle API li yo. Kreye yon kle read, ak yon kle read/write. N ap anrejistre 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 w pa janm lage kle sekrè read/write API a nan anviwònman pwodiksyon bò kliyan an.

N ap ajoute de lòt varyab anviwònman tou: TACOTRANSLATE_DEFAULT_LOCALE ak TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd zòn lokal default pou rekou. Nan egzanp sa a, n ap mete li kòm en pou lang Anglè.
• TACOTRANSLATE_ORIGIN: “Katab” kote chenn 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 : Mete kanpe TacoTranslate

Entegre TacoTranslate ak aplikasyon ou an, ou pral bezwen yo kreye yon kliyan lè l sèvi avèk kle yo API soti nan pi bonè. Pa egzanp, kreye yon dosye 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 talè.

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

Etap 4: Aplike rannman bò sèvè

TacoTranslate pèmèt rann sou bò sèvè pou tradiksyon ou yo. Sa amelyore anpil eksperyans itilizatè a pa montre kontni ki tradui yo 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 isProduction chèk la kostim konfigurasyon ou. Si true, TacoTranslate pral sifas kle API piblik la. Si nou nan yon lokal, tès, oswa anviwònman rete (isProduction is false), nou pral sèvi ak kle sekrè a read/write API a asire w ke nouvo strings yo voye pou tradiksyon.

Jiska kounye a, nou jis mete aplikasyon Next.js la kanpe ak yon lis lang ki sipòte yo. Pwochen bagay nou pral fè se jwenn 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. Remake ke revalidate sou getTacoTranslateStaticProps mete sou 60 pa defo, pou tradiksyon ou yo rete ajou.

Pou itilize swa 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 karaktè nan tout konpozan React ou yo.

import {Translate} from 'tacotranslate/react';

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

Etap 5: Fè deplwaman epi teste!

Nou fini! Aplikasyon Next.js ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt chenn nan yon konpozan Translate. Remake byen ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ki pral kapab kreye nouvo chenn pou tradui. 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 chenn anvan ou lanse li. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi potansyèlman evite gonfle pwojè tradiksyon ou a pa ajoute nouvo chenn ki pa gen rapò.

Asire ou tcheke egzanp konplè a sou pwofil GitHub nou an. La a, w ap jwenn yon egzanp tou 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 lokalize aplikasyon React ou yo otomatikman rapidman pou nenpòt lang, epi soti nan nenpòt lang. Kòmanse jodi a!