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únú a chur i bhfeidhm i d'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 shreanganna go huathoibríoch go haon teanga ag úsáid AI nuálaíoch, agus scaoiltear tú ón mbainistíocht leadránach ar chomhaid JSON.

Déanaimis é a shuiteáil ag úsáid npm sa chríochfort:

npm install tacotranslate

Céim 2: Cruthaigh cuntas TacoTranslate saor in aisce

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

Laistigh den UI den aip TacoTranslate, cruthaigh tionscadal, agus téigh go dtí táb na n-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 ar a dtugaimid public, agus is í an eochair read/write an ceann ar a dtugaimid secret. Mar shampla, d’fhéadfá iad a chur i gcomhad .env i mbun an tionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Bí cinnte gan riamh an eochair API rúnda read/write a sceitheadh i dtimpeallachtaí táirgeachta ar an taobh cliant.

Cuirfimid freisin dhá athróga comhshaoil eile: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe don leagan cúltaca. Sa sampla seo, socróimid é mar en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar na sreanganna téacs, mar shampla an 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 do fheidhmchlár, beidh ort cliant a chruthú ag úsáid na n-eochracha API a luaigh 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 shainmhíniú go huathoibríoch 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í. Ano is, 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, le do thoil cuir na hairíonna agus an cód thuas leis an sainmhíniú.

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

Ceadaíonn TacoTranslate rindreáil ar thaobh an fhreastalaí do do chuid aistriúcháin. Feabhsaíonn sé seo go mór taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc d’ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarrataí líonra ón gcliant a sheachaint, toisc go bhfuil na haistriúcháin go léir a theastaíonn uainn cheana.

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, chuir muid an t-iarratas Next.js ar bun le liosta teangacha tacaithe amháin. Is é an chéad rud eile ná aistriúcháin a fháil do gach leathanach agat. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps ag brath ar do riachtanais.

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

Chun ceachtar feidhm 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 sreingeanna 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: Foilsigh agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React anois aistrithe go huathoibríoch nuair a chuirfidh tú aon théacsanna isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write acu ar an eochair API in ann téacsanna nua a chruthú le bheith aistrithe. Molaimid timpeallacht tástála dhúnta agus shlándáilte a bheith agat ina bhféadfá do fheidhmchlár táirgthe a thástáil leis an eochair API sin, agus téacsanna nua a chur leis sula gcuirtear ar fáil é go poiblí. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus seachnóidh sé go bhfásfaidh do thionscadal aistriúcháin go neamhréireach trí théacsanna nua, neamhghaolmhar a chur leis.

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

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