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

Kijan li fonksyone

Pandan mond lan ap vin plis globalize, li vin pi enpòtan pou devlopè entènèt yo bati aplikasyon ki ka satisfè itilizatè soti nan diferan peyi ak kilti. Yonn nan fason kle pou reyalize sa se atravè internationalizasyon (i18n), ki pèmèt ou adapte aplikasyon ou a diferan lang, monnen, ak fòma dat.

Nan tutoryèl sa a, n ap eksplore kijan pou ajoute internationalizasyon nan aplikasyon React Next.js ou a, ak rannaj 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 pito.

Etap 1: Enstale yon bibliyotèk i18n

Pou aplike entènasyonalizasyon nan aplikasyon Next.js ou an, nou pral premye chwazi yon bibliyotèk i18n. Gen plizyè bibliyotèk popilè, tankou 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 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, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, epi ou pa bezwen mete yon kat kredi.

Nan entèfas itilizatè aplikasyon TacoTranslate la, kreye yon pwojè, epi ale nan tab kle API li yo. 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 ka ajoute yo nan yon dosye .env ki nan rasin pwojè ou a.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Asire w pa janm kite kle API read/write sekre a soti nan anviwònman pwodiksyon 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 default pou ranplasman. Nan egzanp sa a, n ap mete li sou en pou angle.
• TACOTRANSLATE_ORIGIN: “Katab” kote chenn tèks ou yo pral estoke, tankou URL sit entènèt ou. Li plis sou orijin yo isit la.

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

Etap 3 : Mete kanpe TacoTranslate

Pou entegre TacoTranslate ak aplikasyon ou a, ou pral bezwen kreye yon kliyan lè l sèvi avèk kle API yo soti nan 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;

N ap otomatikman defini TACOTRANSLATE_API_KEY byento.

Kreye kliyan an nan yon fichye apa fè l pi fasil pou itilize ankò pita. Kounye a, 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 yo ak kòd ki nan pati ki anwo a.

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

TacoTranslate pèmèt rann sou sèvè pou tradiksyon ou yo. Sa amelyore eksperyans itilizatè anpil pa montre kontni tradui imedyatman, olye pou gen yon ti flash kontni ki pa tradui an premye. Anplis, nou ka sote 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 sèlman te mete aplikasyon Next.js la ak yon lis lang ki sipòte yo. Pwochen bagay n ap fè a se rale 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: Yonn se yon objè Next.js Static Props Context, yon konfigirasyon pou TacoTranslate, ak pwopriyete Next.js opsyonèl. Remake ke revalidate sou getTacoTranslateStaticProps fikse a 60 pa defo, pou tradiksyon ou yo toujou 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 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 Next.js ou a pral kounye a tradui otomatikman lè w 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 kapab kreye nouvo chenn pou tradui. Nou rekòmande pou gen yon anviwònman etapman fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, ajoute nouvo chenn anvan w ale an dirèk. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi potansyèlman gonfle pwojè tradiksyon ou a pa ajoute nouvo chenn 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!