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

Sa rang teagaisc seo, beimid ag iniúchadh conas idirnáisiúniú a chur le d'iarratas 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 do fheidhmchlár Next.js, roghnóimid ar dtús leabharlann i18n. Tá roinnt leabharlannacha coitianta ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, beimid ag úsáid TacoTranslate.

TacoTranslate aistríonn do shlíneáin go huathoibríoch chuig aon teanga ag baint úsáide as AI ceannródaíoch, agus saorann sé tú ón mbainistíocht leadránach a bhaineann le comhaid JSON.

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

Laistigh den UI aip TacoTranslate, cruthaigh tionscadal, agus téigh chuig táb na n-eochairí 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 uirthi, agus is í an eochair read/write an ceann a dtugaimid secret uirthi. Mar shampla, d’fhéadfá iad a chur i gcomhad .env sa fhillteán fréimhe de do thionscadal.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiúnach réamhshocraithe. Sa sampla seo, socróimid é ar en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar na téacsanna seo, mar shampla 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: Cumrú TacoTranslate

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.

Tá sé níos éasca an cliant a úsáid arís níos déanaí má chruthaítear é i gcomhad ar leith. Anois, ag baint úsáide as /pages/_app.tsx, cuirfimid an soláthraí TacoTranslate.

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 déan an sainmhíniú a fhorlíonadh leis na hairíonna agus leis an gcód thuas.

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

Ceadaíonn TacoTranslate 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 áit splanc gearr d'ábhar nach bhfuil aistrithe air ar dtús. Ina theannta sin, is féidir linn iarratais líonra ar an gcliant a sheachaint, toisc go bhfuil na haistriúcháin go léir a theastaíonn uainn 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 é a oiriúnú do shocruithe. Má tá true, nochtfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála nó réamhfhorbartha (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, shocraíomar an feidhmchlár Next.js le liosta teangacha tacaithe. Is é an chéad rud eile a dhéanfaimid ná aistriúcháin a fháil 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 roghnacha Next.js. 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 chóir go mbeifeá anois in ann an chomhpháirt Translate a úsáid chun téacsanna a aistriú laistigh de gach 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 anois á aistriú go huathoibríoch nuair a chuireann tú aon théacsanna sa chomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write ar eochair an API in ann téacsanna nua a chruthú le h-aistriú. Molaimid go mbeadh timpeallacht stéig dúnta agus shlán agat, áit ar féidir leat do fheidhmchlár táirgeachta a thástáil le eochair API mar sin agus téacsanna nua a chur leis sula gcuirtear 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 bheith plódaithe le téacsanna nua neamghaolta.

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!