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

Pandan mond lan ap vin pi plis globalize, li vin pi enpòtan pou devlopè entènèt yo konstwi 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, avèk rann sèvè bò. TL;DR: Wè egzanp konplè a isit la.

Gid 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, n ap itilize TacoTranslate.

TacoTranslate tradui otomatikman chenn tèks ou yo nan nenpòt lang lè l sèvi avèk entèlijans atifisyèl dènye kri, epi li delivre 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 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. Li gratis, epi ou pa bezwen ajoute yon kat kredi.

Nan UI aplikasyon TacoTranslate la, kreye yon pwojè, epi navige nan onglet kle API li a. Kreye yon kle read, epi 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 fichye nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pou ou pa janm revele kle API sekrè read/write la nan anviwònman pwodiksyon sou bò kliyan yo.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kòd lokal pa defo ki sèvi kòm ranplasan. Nan egzanp sa a, n ap mete li sou en pou Angle.
• TACOTRANSLATE_ORIGIN: “katab” kote tèks ou yo pral 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, w ap bezwen kreye yon kliyan ki itilize kle API yo 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 byento.

Kreye kliyan an nan yon fichye separe fè li pi fasil pou itilize ankò pita. Kounye a, lè w ap itilize yon fichye /pages/_app.tsx pèsonalize, 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 pèsonalize pageProps ak _app.tsx, tanpri elaji definisyon an ak pwopriyete yo ak kòd ki pi wo a.

Etap 4 : Aplike rann sou bò sèvè a

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 gen yon kout moman kote kontni an parèt san tradiksyon. 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 tcheke isProduction pou adapte l ak anviwònman ou. Si true, TacoTranslate pral 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 pou asire nouvo chèn yo voye pou tradiksyon.

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

Fonksyon sa yo pran twa agiman: yon objè Next.js Static Props Context, yon konfigirasyon pou TacoTranslate, ak pwopriyete Next.js opsyonèl. Remake ke revalidate sou getTacoTranslateStaticProps la mete sou 60 pa defo, konsa 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!"/>;
}

Kounye a ou ta dwe kapab itilize konpozan Translate la pou tradui strings nan tout konpozan React ou yo.

import {Translate} from 'tacotranslate/react';

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

Etap 5: Deplwaye ak teste!

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

Asire w pou w al tcheke egzanp konplè a sou pwofil GitHub nou an. La a, 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 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!