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é níos tábhachtaí do fhorbróirí gréasáin feidhmchláir a fhorbairt a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na príomhbhealaí chun é seo a bhaint amach ná trí idirnáisiúnú (i18n), a chuireann ar do chumas do fheidhmchlár a oiriúnú do theangacha, do airgeadraí agus do fhoráidí dáta.

Sa rang teagaisc seo, beimid ag iniúchadh conas idirnáisiúnú a chur le do fheidhmchlár React Next.js, le rindreáil ar an bhfreastalaí. 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 sa treoir seo ina áit sin.

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.

Aistríonn TacoTranslate do théacsanna go huathoibríoch go haon teanga ag baint úsáide as AI ceannródaíoch, agus saorann sé thú ón mbainistiú leadránach a bhaineann le comhaid JSON.

Suiteálaimis é ag baint úsáide as npm i do chríochfort:

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

Sa chomhéadan úsáideora den aip TacoTranslate, cruthaigh tionscadal agus téigh go dtí an cluaisín eochraí API. Cruthaigh eochair amháin read agus eochair amháin read/write. Sábhálfaimid iad mar athróga comhshaoil. Is í an eochair read an ceann a ghlaoimid public agus is í an eochair read/write an 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 nochtadh do thimpeallachtaí táirgeachta ar thaobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cód réigiún réamhshocraithe a úsáidfear mar fhillteán cúltaca. Sa sampla seo, socróimid é mar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar 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 d’iarratas, beidh ort cliant a chruthú ag baint úsáide as na heochracha API a luadh thuas. 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 sainmhíniú ar TACOTRANSLATE_API_KEY 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í. Anois, trí úsáid a bhaint as /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 féin, síne an sainmhíniú leis na hairíonna agus leis an gcód thuas, le do thoil.

Céim 4: Ag cur rindreála taobh an fhreastalaí i bhfeidhm.

Ceadaíonn TacoTranslate rindreáil ar an fhreastalaí do do chuid aistriúchán. Feabhsaíonn sé seo go mór taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, in áit 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 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'),
	});
};

Coigeartaigh an seiceáil isProduction chun é a oiriúnú do do shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála nó stáideála (isProduction is false), úsáidfimid an rúnda read/write eochair API chun a chinntiú go seolfar téacsanna nua le haistriúchán.

Go dtí seo, shocraíomar an feidhmchlár Next.js ach le liosta de theangacha tacaithe. An chéad rud eile a dhéanfaimid ná aistriúcháin a fháil do na leathanaigh go léir. 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 mbeidh do aistriúcháin cothrom le dáta.

Chun ceann de na feidhmeanna sin 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á in ann anois an chomhphá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: Cuir 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éacsanna 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 h-aistriú. Molaimid timpeallacht stáideála dhún, shlán a choinneáil ina mbeidh tú ábalta do fheidhmchlár táirgthe a thástáil le heochair API den sórt sin, agus téacsanna nua a chur leis sula gcuirfear an leagan beo. Cuirfidh sé cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus d'fhéadfadh sé do thionscadal aistriúcháin a líonadh go neamhriachtanach le téacsanna nua neamhghaolmhar.

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!