Conas idirnáisiúnú a chur i bhfeidhm i bhfeidhmchlár Next.js atá ag úsáid an Pages Router

De réir mar a éiríonn an domhan níos idirnáisiúnta, tá sé ag éirí níos tábhachtaí do fhorbróirí gréasáin feidhmchláir a thógáil a fhreastalóidh ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí riachtanacha chun seo a bhaint amach ná trí idirnáisiúniú (i18n), a ligeann duit do fheidhmchlár a thabhairt ar aghaidh do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sna ranganna teagaisc seo, déanfaimid iniúchadh ar conas idirnáisiúniú 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 fheidhmchláir Next.js atá ag úsáid an Pages Router.
Má tá tú ag úsáid an App Router, féach ar an treoir seo ina áit.

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 leabharlanna coitianta ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, beimid ag úsáid TacoTranslate.

Aistríonn TacoTranslate do théacsanna go huathoibríoch chuig aon teanga ag úsáid AI ceannródaíoch, agus cuireann sé deireadh leis an mbainistíocht leadránach ar chomhaid JSON.

Suiteáilfimid é ag úsáid npm i do chríochfort:

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, tionscadal aistriúcháin agus na heochracha API gaolmhara a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl ort cárta creidmheasa a chur leis.

Laistigh den UI aip TacoTranslate, cruthaigh tionscadal, agus téigh go dtí an cluaisín eochracha API aige. Cruthaigh eochair amháin read agus eochair amháin read/write. Sábhálfaimid iad mar athróga timpeallachta. Is í an eochair read an ceann a ghlaoimid public, agus is í an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur i gcomhad .env i bhfréamh do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ná scaip riamh an eochair API rúnda read/write i dtimpeallachtaí táirgeachta ar thaobh an chliaint.

Cuirfimid furthermore dhá athróg timpeallachta eile: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiúnach réamhshocrú. Sa sampla seo, socrófaimid é mar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar do théacsanna, ar nós URL do shuíomh Gréasáin. Léigh tuilleadh faoi fhoinsí anseo.

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

Céim 3: Ag socrú TacoTranslate

Chun TacoTranslate a chomhtháthú le d’iarratas, beidh ort cliant a chruthú ag úsáid na n-eochracha API ón tráth roimhe sin. 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;

Beidhomar ag sainmhíniú go huathoibríoch TACOTRANSLATE_API_KEY go luath.

Má chruthaítear an cliant i gcomhad ar leith, bíonn sé 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, leathnaigh an sainmhíniú leis na hairíonna agus an cód atá thuas.

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

Ceadaíonn TacoTranslate rindreáil ar thaobh an fhreastalaí do do aistriúcháin. Feabhsaíonn sé seo an taithí úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, seachas splanc d’ábhar nach bhfuil aistrithe ar dtús. Thairis sin, is féidir linn iarratais líonra ar an gcliant a sheachaint, mar tá na haistriúcháin go léir a theastaíonn 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ála isProduction chun freastal ar do shocruithe. Má tá true ann, cuirfidh TacoTranslate eochair API phoiblí i láthair. Má táimid i dtimpeallacht áitiúil, tástála, nó stéigeach (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar sreanga nua le haistriú.

Go dtí seo, níor shocraíomar an feidhmchlár Next.js ach le liosta de theangacha tacaithe. An chéad rud eile a dhéanfaimid ná aistriúcháin a fháil do gach ceann de do leathanaigh. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do riachtanais.

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

Chun ceann acu a úsáid i leathanach, glacaimid 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 go mbeifeá in ann anois an comhpháirt Translate a úsáid chun téacsanna a aistriú i ngach ceann de do chomhpháirteanna React.

import {Translate} from 'tacotranslate/react';

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

Céim 5: Seol agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React aistrithe go huathoibríoch anois nuair a chuireann tú aon théacsanna i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write ar an eochair API in ann téacsanna nua a chruthú le h-aistriú. Molaimid timpeallacht stádála dhúntha agus shlán a bheith agat, áit ar féidir leat do fheidhmchlár táirgeachta a thástáil le eochair API den sórt sin agus téacsanna nua a chur leis sula dtéann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith duine ar bith do eochair rúnda API a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a líonadh le téacsanna nua neamghaolta.

Seiceáil an sampla iomlán ar ár bpróifíl GitHub. Ansin, gheobhaidh tú freisin sampla de conas é seo a dhéanamh ag úsáid an App Router! Má thagann aon fhadhb ort, ná bíodh leisce ort teagmháil a dhéanamh, agus beidh áthas orainn cabhrú leat.

Ligeann TacoTranslate duit do fheidhmchláir React a áitiú go huathoibríoch agus go tapa chuig agus ó níos mó ná 75 teanga. Tosaigh inniu!