An réiteach is fearr do idirnáisiúnú (i18n) i bhfeidhmchláir Next.js

Conas a oibríonn sé

De réir mar a éiríonn an domhan níos idirnáisiúnta, tá sé níos tábhachtaí do fhorbróirí gréasáin a fheidhmchláir a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Is ceann de na bealaí is tábhachtaí chun é seo a bhaint amach ná trí idirnáisiúnú (i18n), a ligeann duit do fheidhmchlár a oiriúnú do theangacha, do chistí, agus do fhormáidí dáta éagsúla.

Sa teagasc seo, beimid ag iniúchadh conas idirnáisiúnú a chur le do fheidhmchlár React Next.js, le léiriú ar thaobh an fhreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do na feidhmchláir Next.js atá ag úsáid an Pages Router.
Má tá tú ag úsáid an App Router, féach an treoir seo ina ionad sin, le do thoil.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúnú a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlann cháiliúla ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, úsáidfimid TacoTranslate.

Aistríonn TacoTranslate do shreanganna go huathoibríoch go haon teanga ag baint úsáide as AI nuálaíoch, agus scaoiltear saor tú ó bhainistiú crua comhad JSON.

Déanaimis é a shuiteáil ag úsáid npm sa teirminéal:

npm install tacotranslate

Céim 2: Cruthaigh cuntas TacoTranslate saor in aisce

Anois go bhfuil an modúl suiteáilte agat, tá sé in am do chuntas TacoTranslate a chruthú, tionscadal aistriúcháin, agus eochracha API a bhaineann leis. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní iarrtar ort cárta creidmheasa a chur leis.

Laistigh den chomhéadan úsáideora feidhmchláir TacoTranslate, cruthaigh tionscadal, agus nascleanúint chuig cluaisín na n-eochracha API aige. Cruthaigh eochair amháin read agus eochair amháin read/write. Sábhálfaimid iad mar athróga comhshaoil. Is é an eochair read an rud a ghlaoimid public agus is é an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i mbunlíne do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Déan cinnte gan riamh eochair API rúnda read/write a sceitheadh chuig timpeallachtaí táirgthe taobh an chliaint.

Cuirfimid dhá athróg chomhshaoil ​​bheag eile leis freisin: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe do shuíomh imeachta. Sa sampla seo, leanfaimid é a shocrú go en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stóráilfear do shraitheanna, mar shampla URL do shuíomh gréasáin. Léigh tuilleadh faoi bhunús anseo.

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

Céim 3: Ag socrú suas TacoTranslate

Chun TacoTranslate a chomhtháthú le d'iarratas, beidh ort cliant a chruthú ag baint úsáide as na heochracha API ó níos luaithe. Mar shampla, cruthaigh comhad darb ainm /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;

Beidh muid ag sainmhíniú TACOTRANSLATE_API_KEY go huathoibríoch go gairid.

Déantar an cliant a chruthú i gcomhad ar leith chun é a dhéanamh níos éasca a úsáid arís níos déanaí. Anois, ag baint úsáide as /pages/_app.tsx saincheaptha, cuirfimid an soláthraí TacoTranslate leis.

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>
	);
}

Má tá pageProps agus _app.tsx saincheaptha agat cheana, le do thoil síne an sainmhíniú leis na réada agus an cód ó thuas.

Céim 4: Ag cur i bhfeidhm léiriú taobh an fhreastalaí

Ligann TacoTranslate do léiriú taobh an fhreastalaí de do aistrithe. Feabhsaíonn sé seo an taithí úsáideora go mór trí shonraíocht a thaispeáint aistrithe láithreach, in ionad géarghá an ábhair nach ndearnadh aistriúdiú uirthi a thaispeáint ar dtús. Ina theannta sin, is féidir linn éileamh líonra a scipeáil ar an gcustaiméir, toisc go bhfuil na haistriúcháin go léir atá uainn againn cheana féin.

Tosóimid trí /next.config.js a chruthú nó a mhodhnú.

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'),
	});
};

Athraigh an seiceáil isProduction chun oiriúnú do do shocraithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó céimnithe (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seoltar na sreanga nua le haghaidh aistrithe.

Go dtí seo, níor chuir muid ach liosta de theangacha tacaithe ar bun don aip Next.js. An chéad rud eile a dhéanfaidh muid ná aistrithe a fháil do do gach leathanach. Chun é sin a dhéanamh, úsáidfidh tú nó getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do riachtanais.

Tógann na feidhmeanna seo trí argóint: Aon ruda Next.js Static Props Context, cumraíocht do TacoTranslate, agus airíonna roghnach Next.js. Tabhair faoi deara go bhfuil revalidate ar getTacoTranslateStaticProps socraithe go 60 de réir réamhshocraithe, ionas go bhfuil do aistriúcháin cothrom le dáta.

Chun aon cheann den dá fheidhmiú a úsáid i leathanach, glac leis go bhfuil comhad leathanach agat cosúil le /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!"/>;
}

Ba chóir duit a bheith in ann anois an comhpháirt Translate a úsáid chun sreanga a aistriú laistigh de gach ceann de do chomhpháirteanna React.

import {Translate} from 'tacotranslate/react';

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

Céim 5: Déan dífhostú agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár Next.js aistrithe go huathoibríoch anois nuair a chuireann tú aon shreanga isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write ar an eochair API in ann sreanga nua a chruthú le haistriú. Molaimid go mbeadh timpeallacht stáitse dúnta agus shlándáilte agat ina bhféadfá do fheidhmchlár táirgthe a thástáil le eochair API mar sin, ag cur sreanga nua leis sula mbeidh sé beo. Coscfaidh sé seo ar dhuine ar bith do eochair rúnda API a ghoid, agus b’fhéidir go mbeidh do thionscadal aistriúcháin ag fás ró-mhór trí shreanga nua, neamhghaolta a chur leis.

Bí cinnte seiceáil an sampla iomlán againn ar ár bpróifíl GitHub. Anseo, gheobhaidh tú sampla freisin de conas é seo a dhéanamh ag úsáid an App Router*! Má thagann aon fhadhbanna ort, ná bíodh drogall ort teagmháil a dhéanamh, agus beidh lúcháir orainn cabhrú leat.

Ligeann TacoTranslate duit do chuid iarratas React a áitiúlú go huathoibríoch go tapa isteach agus amach as aon teanga. Tosaigh inniu!