An réiteach is fearr do 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 aipeanna a chruthú atá in ann freastal ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí ríthábhachtacha chun é seo a bhaint amach is ea idirnáisiúnú (i18n), a ligeann duit do fheidhmchlár a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sa 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 a úsáideann an Pages Router.
Má tá tú ag úsáid an App Router, féach sa 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 leabharlann i18n ar dtús. Tá roinnt leabharlann choitianta 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 haon teanga go huathoibríoch ag baint úsáide as AI nuálach, agus cuireann sé deireadh leis an ngá le comhaid JSON a bhainistiú de láimh.

Déanaimis é a shuiteáil 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 heochracha API gaolmhara a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl ort cárta creidmheasa a chur leis.

Laistigh den chomhéadan úsáideora (UI) den aip TacoTranslate, cruthaigh tionscadal, agus téigh chuig cluaisí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 ghlaoimid public, agus is í an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur sa chomhad .env ag bun do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Déan cinnte nach scaipefar riamh an eochair API rúnda read/write chuig timpeallachtaí táirgthe ar thaobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiúnach réamhshocraithe mar chúltaca. Sa sampla seo, socróimid é ar en do 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 bhunúsanna 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;

Beimid ag sainmhíniú TACOTRANSLATE_API_KEY go huathoibríoch go luath.

Déantar an cliant a chruthú i gcomhad ar leith, rud a fhágann go bhfuil sé níos éasca é a úsáid arís níos déanaí. Ano is, ag baint úsáide as saincheaptha /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 féin, le do thoil síne an sainmhíniú leis na hairíonna agus an cód thuasluaite.

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

Ligeann TacoTranslate duit do aistriúcháin a léiriú ar thaobh an fhreastalaí. Cuireann sé seo go mór le taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, seachas splanc d’ábhar gan aistriú 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 uile atá 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 de réir do shocrúcháin. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála nó staging (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seoltar téacsanna nua le haghaidh aistriúcháin.

Go dtí seo, níor shocraíomar ach an t-iarratas Next.js le liosta de na teangacha a dtacaítear leo. An chéad rud eile a dhéanfaimid ná aistriúcháin a fháil do do leathanaigh go léir. Chun é sin a dhéanamh, bainfidh tú úsáid as ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do riachtanais.

Glacann na feidhmeanna seo trí argóintí: réad Next.js Static Props Context amháin, 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 ceann acu a úsáid i leathanach, glacfaimid 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 téacsanna 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 d’iarratas Next.js á aistriú go huathoibríoch anois nuair a chuireann tú aon théacs isteach 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 haistriú. Molaimid timpeallacht stáitse dhúnáilte agus shlándáilte a choinneáil, ina bhféadfá d’iarratas táirgthe a thástáil le heochair API den sórt sin agus téacsanna nua a chur leis sula gcuirfear é beo. Cuirfidh sé seo cosc ar aon duine do eochair API rúnda a ghoid, agus seachnóidh sé an fhéidearthacht go líonfar do thionscadal aistriúcháin le téacsanna nua neamhghaolta.

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!