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

Pandan mond lan ap vin pi globalize, li vin de pli an pli enpòtan pou devlopè entènèt yo konstwi aplikasyon ki kapab 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 tutoriel sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, ak rann sou bò sèvè. TL;DR: Gade egzanp konplè a isit la.

Guid sa a fèt 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è, tankou next-intl. Sepandan, nan egzanp sa a, nou pral itilize TacoTranslate.

TacoTranslate tradui otomatikman tèks ou yo nan nenpòt lang ak yon AI avanse, e li delivre ou de travay fatigan pou jere fichye 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, li lè pou kreye kont TacoTranslate ou a, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, epi 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. Pou 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 ekspoze kle API sekrè read/write la nan anviwònman pwodiksyon sou 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 ranplasman. Nan egzanp sa a, n ap mete li sou en pou angle.
• TACOTRANSLATE_ORIGIN: "dosye" kote fisèl 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 dosye separe fè li pi fasil pou itilize ankò pita. Kounye a, lè w ap itilize yon koutim /pages/_app.tsx, 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 pèsonalize pageProps ak _app.tsx, tanpri ajoute nan definisyon an pwopriyete yo ak kòd ki anwo a.

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

TacoTranslate pèmèt rann tradiksyon ou yo sou bò sèvè. Sa anpil amelyore eksperyans itilizatè a paske li montre kontni tradui imedyatman, olye pou gen yon ti 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'),
	});
};

Modifye verifikasyon isProduction la pou adapte li ak konfigirasyon ou. Si true, TacoTranslate pral 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 ke nouvo chèn tèks yo voye pou tradiksyon.

Jiskaprezan, nou sèlman te konfigire aplikasyon Next.js la avèk yon lis lang ki sipòte yo. Pwochen etap la se rekipere tradiksyon pou tout paj ou yo. Pou fè sa, w ap itilize swa getTacoTranslateStaticProps oswa getTacoTranslateServerSideProps dapre 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 byen ke revalidate sou getTacoTranslateStaticProps mete sou 60 pa defo, pou tradiksyon ou yo rete ajou.

Pou itilize swa fonksyon an 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!"/>;
}

Ou ta dwe kounye a kapab itilize Translate konpozan an pou tradui tèks 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 React ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt chenn tèks nan yon konpozan Translate. Remake ke sèlman anviwònman ki gen pèmisyon read/write sou kle API a ap kapab kreye nouvo chenn tèks pou yo tradui. Nou rekòmande pou genyen yon anviwònman staging fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, ajoute nouvo chenn tèks anvan ou pibliye. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, e potansyèlman gonfle pwojè tradiksyon ou a pa ajoute nouvo chenn tèks ki pa gen rapò.

Asire w pou w tcheke egzanp konplè a sou pwofil GitHub nou an. La, 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 pran kontak, e n ap kontan anpil ede w.

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