An réiteach is fearr d'idirnáisiúnú (i18n) i bhfeidhmchláir Next.js

Conas a oibríonn sé

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 feidhmchláir a chruthú 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únú (i18n), a chuireann ar do chumas do fheidhmchlár a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sa teagasc seo, beimid ag iniúchadh conas idirnáisiúnú a chur le do fheidhmchlár React Next.js, lena rindreáil ar an bhfreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do iarratais Next.js a úsáideann 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 leabharlann cháiliúla 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 úsáid AI chun tosaigh, agus scaoileann sé tú ó bhainistiú leadránach na gcomhad JSON.

Suiteálaimis é 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, tionscadal aistriúcháin agus na eochracha API gaolmhara a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl aon ghá duit cárta creidmheasa a chur leis.

Laistigh den chomhéadan úsáideora (UI) de TacoTranslate, cruthaigh tionscadal agus téigh go dtí cluaisín 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 a thugaimid public, agus is í an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i bhun 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 chuig timpeallachtaí táirgeachta ar thaobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe réigiúnach. Sa sampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do théacsanna, mar shampla URL do shuíomh gréasáin. Léigh tuilleadh 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 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;

Beidhomar ag sainmhíniú go huathoibríoch TACOTRANSLATE_API_KEY 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í. Anois, ag úsáid /pages/_app.tsx, 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 síne an sainmhíniú leis na hairíonna agus an cód atá thuas.

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

Tugann TacoTranslate cumas do aistrithe a rindreáil ar thaobh an fhreastalaí. Feabhsaíonn sé seo an taithí úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, in áit am gairid ina bhfeictear ar dtús ábhar nach bhfuil aistrithe. Ina theannta sin, is féidir linn iarratais líonra ón gcliant a sheachaint, toisc go bhfuil 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 de réir do shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó i dtimpeallacht réamhfhorbartha (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seoltar téacsanna nua le haghaidh aistriú.

Go dtí seo, chuir muid an feidhmchlár Next.js ar bun le liosta de theangacha tacaithe amháin. Is é an chéad rud eile a dhéanfaidh muid ná aistriúcháin a fháil do gach ceann de do leathanaigh. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do riachtanais.

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

Chun aon cheann de na feidhmeanna seo a úsáid ar 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á in ann anois an chomhpháirt Translate a úsáid chun sreanganna 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: Cur i bhfeidhm agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár Next.js anois aistrithe go huathoibríoch nuair a chuireann tú aon théacs isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach na timpeallachtaí a bhfuil ceadanna read/write acu ar an eochair API in ann téacsanna nua a chruthú le haistriú. Molaimid timpeallacht stádála dhún agus shlándáilte a chothabháil, áit ar féidir leat do fheidhmchlár táirgthe a thástáil le eochair API den sórt sin agus téacsanna nua a chur leis sula gcuirtear é i mbun seirbhíse. Cuirfidh sé sin cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus d'fhéadfadh sé do thionscadal aistriúcháin a mhéadú go míchuí trí théacsanna nua neamhghaolmhara a chur leis.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!