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 aipeanna a chruthú a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Is ceann de na príomhbhealaí chun seo a bhaint amach ná idirnáisiúnú (i18n), a ligeann duit do aip a oiriúnú do theangacha, do airgeadraí agus do fhormáidí dáta éagsúla.

Sa cheacht seo, scrúdóimid conas idirnáisiúnú a chur le do aip React Next.js, le rindreáil ar thaobh an fhreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do iarratais Next.js a úsáideann an Pages Router.
Má tá tú ag úsáid an App Router, féach le do thoil ar an treoir seo ina ionad.

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, san sampla seo, beimid ag úsáid TacoTranslate.

Aistríonn TacoTranslate do shreanganna go huathoibríoch chuig aon teanga ag úsáid AI nuálaíoch, agus saorann sé tú ón mbainistíocht leadránach ar chomhaid JSON.

Suiteálfaimid é ag úsáid npm i do thearmann:

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 a bhaineann leo a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur isteach.

Sa chomhéadan úsáideora (UI) de TacoTranslate, cruthaigh tionscadal, agus téigh go dtí an táb eochracha API aige. Cruthaigh eoch amháin read agus eoch amháin read/write. Sábhálfaimid iad mar athróga comhshaoil. Is é an eoch read an ceann a thugaimid public air, agus is é an eoch read/write 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

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

Cuirfimid freisin dhá athróir chomhshaoil breise: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiúnach réamhshocraithe le haghaidh cúltaca. Sa sampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stóráilfear do théacsanna, mar shampla URL do shuíomh Gréasáin. Léigh tuilleadh faoi bhunfhoinsí anseo.

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

Céim 3: Ag cur TacoTranslate ar bun

Chun TacoTranslate a chomhtháthú le do fheidhmchlár, beidh ort cliant a chruthú ag úsáid na n-eochracha API a luadh 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;

Déanfaimid TACOTRANSLATE_API_KEY a shainiú go huathoibríoch go luath.

Má chruthaítear an cliant i gcomhad ar leith, bíonn sé níos éasca é a athúsáid níos déanaí. Anois, ag úsáid /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, síne an sainmhíniú leis na hairíonna agus an cód thuas, le do thoil.

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

Ceadaíonn TacoTranslate rindreáil ar thaobh an fhreastalaí do chuid aistriúchán. Feabhsaíonn sé seo go mór taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, seachas splanc d’ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarratais líonra ar an gcliant a sheachaint, mar tá na haistriúcháin uile 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 chun teacht le do chumraíocht. Má tá true, nochtfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó staging (isProduction is false), bainfimid úsáid as an eochair API rúnda read/write chun a chinntiú go seolfar sreangacha nua le haistriúchán.

Go dtí seo, tá an feidhmchlár Next.js curtha suas againn díreach le liosta teangacha tacaithe. An chéad rud eile a dhéanfaimid ná aistrithe a fháil do gach ceann de do leathanaigh. Chun é sin a dhéanamh, úsáidfidh tú ceann acu 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 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 cothrom le dáta.

Chun ceann de na feidhmeanna seo 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 cheart go mbeifeá anois in ann an comhpháirt Translate a úsáid chun sreangáin a aistriú i do chomhpháirteanna React go léir.

import {Translate} from 'tacotranslate/react';

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

Céim 5: Cuir i bhfeidhm agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React aistrithe go huathoibríoch anois nuair a chuireann tú téacsanna ar bith 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 tástála dhún agus shlán a bheith agat ina bhféadfá do fheidhmchlár táirgeachta a thástáil leis an eochair API sin, ag cur téacsanna nua leis sula gcuirfear ar líne é. Choscfaidh sé seo ar dhuine ar bith duine ar bith do eochair API rúnda a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a bhreisiú go míchuí trí théacsanna nua neamhghaolmhar a chur leis.

Bí cinnte féach ar 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 fhadhbanna ort, ná bíodh leisce ort teagmháil a dhéanamh, beidh áthas orainn cabhrú leat.

Ligeann TacoTranslate duit d’iarratais React a áitiúlú go huathoibríoch go tapa chuig agus ó níos mó ná 75 teanga. Tosaigh inniu!