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

Kijan li mache

Pandan mond lan ap vin pi globalize, li vin de pli an pli enpòtan pou devlopè wèb yo bati aplikasyon ki ka satisfè itilizatè ki soti nan diferan peyi ak kilti. Youn nan fason kle pou reyalize sa a se atravè entènasyonalizasyon (i18n), ki pèmèt ou adapte aplikasyon ou a diferan lang, lajan, ak fòma dat.

Nan leson sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, ak rann sou bò sèvè a. TL;DR: Gade egzanp konplè a isit la.

Gid sa a se pou aplikasyon Next.js ki 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 otomatikman tradwi tèks ou yo nan nenpòt lang lè l sèvi avèk entèlijans atifisyèl avanse, epi li libere w de jesyon fatigan dosye JSON yo.

Ann enstale li ak npm nan tèminal ou:

npm install tacotranslate

Etap 2: Kreye yon kont TacoTranslate gratis

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

Nan entèfas aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan onglet 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 pou pa janm flite kle API sekrè read/write la nan anviwònman pwodiksyon bò kliyan an.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal default pou itilize kòm rezèv. 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 wèb 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 nan aplikasyon ou a, ou pral bezwen kreye yon kliyan lè w itilize kle API yo ke ou te kreye 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 byento.

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, nou pral 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 elaji definisyon an ak pwopriyete yo ak kòd ki pi wo a.

Step 4: Enplemante randèr sou bò sèvè

TacoTranslate pèmèt rann tradiksyon ou yo sou bò sèvè a. Sa amelyore anpil eksperyans itilizatè a paske li montre kontni tradui yo imedyatman, olye pou gen yon kout moman kote kontni an parèt san tradiksyon. Anplis, nou ka evite demann rezo sou bò 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'),
	});
};

Ajiste verifikasyon isProduction la pou li matche ak anviwònman ou. Si true, TacoTranslate ap ekspoze 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 pou asire nouvo tèks yo voye pou tradiksyon.

Jiska kounye a, nou sèlman te mete aplikasyon Next.js la sou pye ak yon lis lang ki sipòte yo. Pwochen bagay nou pral fè se rekipere tradiksyon pou tout paj ou yo. Pou fè sa, w ap itilize swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps selon bezwen ou.

Fonksyon sa yo pran twa agiman: Yon Next.js Static Props Context objè, konfigirasyon pou TacoTranslate, ak pwopriyete Next.js opsyonèl. Remake ke revalidate sou getTacoTranslateStaticProps mete a 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 konpozan Translate la pou tradui chèn karaktè yo 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 Next.js ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt tèks nan yon Translate konpozan. Sonje ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ap kapab kreye nouvo tèks pou tradui. Nou rekòmande pou gen yon anviwònman staging fèmen epi sekirize kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, ajoute nouvo tèks anvan ou pibliye li. Sa ap anpeche nenpòt moun nenpòt moun vòlè kle API sekrè ou, e potansyèlman gonfle pwojè tradiksyon ou pa ajoute nouvo tèks ki pa gen rapò.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!