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é níos tábhachtaí do fhorbróirí gréasáin aipeanna a chruthú a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Is ceann de na bealaí is tábhachtaí chun é seo a bhaint amach ná idirnáisiúnú (i18n), a chuireann ar do chumas d’fheidhmchlár a oiriúnú do theangacha, do airgeadraí agus do bhformáidí dáta éagsúla.

Sa rang teagaisc seo, déanfaimid iniúchadh ar conas idirnáisiúnú a chur le do fheidhmchlár React Next.js, le rindreáil 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 ionad.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúint 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, úsáidfimid TacoTranslate.

Aistríonn TacoTranslate do shreanganna go huathoibríoch chuig aon teanga ag baint úsáide as AI nuálach, agus scaoileann sé tú ó bhainistiú leadránach na gcomhad JSON.

Déanaimis é a shuiteáil ag úsáid npm i do theirminal:

npm install tacotranslate

Céim 2: Cruthaigh cuntas saor in aisce ar TacoTranslate

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í gá duit cárta creidmheasa a chur leis.

Sa chomhéadan úsáideora TacoTranslate, cruthaigh tionscadal, agus téigh chuig an táb eochracha API. 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 dtugaimid public, agus is é an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i bhfréamh do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Déan cinnte gan riamh an eochair API rúnda read/write a nochtadh i dtimpeallachtaí táirgeachta ar thaobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cód réamhshocraithe don áitiúlacht chúltaca. Sa shampla seo, socrófaimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do théacsanna, mar shampla an URL de do shuíomh gréasáin. Léigh tuilleadh faoi origíní anseo.

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

Céim 3: Ag socrú TacoTranslate

Chun TacoTranslate a chomhtháthú le do fheidhmchlár, beidh ort cliant a chruthú ag baint úsáide as na eochracha API a fuair tú 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;

Sainmhíneofar TACOTRANSLATE_API_KEY go huathoibríoch go luath.

Déantar an cliant a chruthú i gcomhad ar leith, rud a éascaíonn é 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 thuas.

Céim 4: Ag cur i bhfeidhm rindreála ar thaobh an fhreastalaí

Cuireann TacoTranslate ar chumas duit do aistriúcháin a rindreáil ar an freastalaí. Feabhsaíonn sé seo taithí an úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc d'ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, ní gá dúinn iarratais líonra a sheoladh ón gcliant, mar tá 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'),
	});
};

Coigeartaigh an seiceáil isProduction de réir do chumraíochta. Má tá true, nochtfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stáitse (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seolfar téacsanna nua le haistriúchán.

Go dtí seo, tá an feidhmchlár Next.js socraithe againn le liosta de na teangacha a thacaítear leo. An chéad rud a dhéanfaimid anois ná aistriúcháin a fháil do do gach leathanach. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps ag brath ar do riachtanais.

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

Chun ceann de na feidhmeanna seo a úsáid i leathanach, glacaimis 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 cheart go mbeifeá in ann anois an chomhphá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 déan tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React anois aistrithe go huathoibríoch nuair a chuirfidh tú aon téacs isteach 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 haistriú. Molaimid timpeallacht stádála dhúntha agus shlán a bheith agat inar féidir leat do fheidhmchlár táirgeachta a thástáil le heochair API mar sin, ag cur téacsanna nua leis roimh dhul beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a iomarcú trí théacsanna nua, neamhbhaintacha a chur leis.

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

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