Conas idirnáisiúnú a chur i bhfeidhm i bhfeidhmchlár Next.js atá ag baint úsáide as 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 feidhmchláir a fhorbairt a fhreastalóidh ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Tá ceann de na bealaí ríthábhachtacha chun seo a bhaint amach trí idirnáisiúnú (i18n), a ligeann duit do fheidhmchlár a oiriúnú do theangacha, airgeadraí agus formáidí dáta éagsúla.

Sa threoir seo, beimid ag iniúchadh 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 le do thoil ar an treoir seo in á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 leabharlann 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 baint úsáide as AI ceannródaíoch, agus scaoileann sé tú ón mbainistíocht leadránach ar chomhaid JSON.

Suiteálaimis é 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 a bhunú, agus na eochracha API gaolmhara a shocrú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní gá duit cárta creidmheasa a chur leis.

Sa chomhéadan úsáideora (UI) de 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 ghlaoimid public, agus is í an eochair read/write an ceann a ghlaoimid 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 nach nochtann tú riamh an eochair API rúnda read/write do thimpeallachtaí táirgthe ar thaobh an chliant.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cód réamhshocraithe do theanga cúltaca. Sa sampla seo, socróimid é mar en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórófar do na téacsanna, mar shampla an URL do shuíomh Gréasáin. Léigh níos mó faoi 'origins' 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 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;

Beidh TACOTRANSLATE_API_KEY á shainiú againn go huathoibríoch go luath.

Trí chliant a chruthú i gcomhad ar leith, éascaítear é a úsáid arís níos déanaí. Anois, agus /pages/_app.tsx saincheaptha á úsáid againn, cuirfimid soláthróir 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 féin, le do thoil síne 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í

Ligeann TacoTranslate duit do aistriúcháin a rindreáil ar thaobh an fhreastalaí. Feabhsaíonn sé seo go mór taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc gearr d’ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarratais líonra ón gcliant a sheachaint, toisc go bhfuil na haistriúcháin uile atá againn 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'),
	});
};

Modhnigh an seiceáil isProduction chun freastal ar do shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála nó réamhsheolta (isProduction is false), bainfimid úsáid as an eochair API rúnda read/write chun a chinntiú go seoltar sreanganna nua le haistriúchán.

Go dtí seo, shocraíomar an aip Next.js 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 acu 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 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 cothrom le dáta.

Chun aon cheann 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 chomhpháirt Translate a úsáid chun sreangacha a aistriú laistigh de 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 anois aistrithe go huathoibríoch nuair a chuireann 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 haistriú. Molaimid go mbeadh timpeallacht stagála dúnta agus shlán agat inar féidir leat do fheidhmchlár táirgeachta a thástáil leis an eochair API sin, ag cur théacsanna nua leis sular téann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair rúnda API a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a mhéadú go neamhriachtanach 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 den chaoi le é seo a dhéanamh ag baint úsáide as App Router! Má bhíonn aon fhadhbanna agat, ná bíodh aon leisce ort teagmháil a dhéanamh, agus beidh áthas orainn cabhrú leat.

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