An réiteach is fearr le haghaidh idirnáisiúntaíochta (i18n) i aip Next.js

Conas a oibríonn sé

De réir mar a éiríonn an saol níos domhanda, tá sé ag dul i ngleic níos tábhachtaí do fhorbróirí gréasáin a thógáil aipeanna atá in ann freastal ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí clé chun seo a bhaint amach ná trí idirnáisiúniú (i18n), a ligeann duit do d’iarratas a oiriúnú do theangacha, do churais airgeadais, 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 léiriú ar thaobh an fhreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do na hiarratais Next.js a bhfuil an Pages Router á úsáid acu.
Má tá tú ag úsáid an App Router, féach ar an treoir seo in áit.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúntacht a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlanna coitianta ann, lena n-áirítear next-intl. Mar sin féin, san sampla seo, bainfimid úsáid as TacoTranslate.

Déantar do shraitheanna a aistriú go huathoibríoch chuig aon teanga ag TacoTranslate ag úsáid AI chun cinn, agus saorann sé tú ón bpróiseas tedious bainistíochta comhad JSON.

Déanaimis é a shuiteáil ag úsáid npm i do 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, agus na eochracha API gaolmhara. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur leis.

Laistigh de UI an iarratais TacoTranslate, cruthaigh tionscadal, agus nascleanúint chuig 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 uirthi agus is é an eochair read/write an ceann a thugaimid secret. Mar shampla, d’fhéadfá iad a chur isteach i gcomhad .env i bhfréamh do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Déan cinnte gan an eochair API rúnda read/write a scaipeadh riamh chuig timpeallachtaí táirgthe taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhchónaí stórála caillte. Sa sampla seo, socrófaimid é mar en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do shreangáin, mar shampla URL do shuíomh gréasáin. Léigh níos mó faoi fhoinsí 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 úsáid na heochracha API ón nóiméad roimhe sin. 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 sonrú TACOTRANSLATE_API_KEY go huathoibríoch go luath.

Ag cruthú an chliaint i gcomhad ar leith déanann sé níos éasca é a úsáid arís níos déanaí. Anois, ag baint úsáide 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, le do thoil sín an sainmhíniú leis na maoine agus an cód ón alt thuas.

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

Ceadaíonn TacoTranslate léiriú taobh an fhreastalaí ar do aistriúcháin. Feabhsaíonn sé seo an taithí úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, in ionad géilleadh gearr ar ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra ar an gcliant a scipeáil, toisc go bhfuil na haistriúcháin go léir atá uainn againn cheana féin.

Tosóimid trí chruthú nó trí athrú a dhéanamh ar /next.config.js.

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'),
	});
};

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

Go dtí seo, ní dhearna muid ach liosta de na teangacha tacaíochta a shocrú don fheidhmchlár Next.js. An chéad rud eile a dhéanfaimid ná aistriúcháin a bhailiú 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í: Aonrú 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 go réamhshocraithe ag 60, ionas go mbeidh do aistriúcháin cothrom le dáta.

Chun aon cheann de na feidhmeanna seo a úsáid i leathanach, glac 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 duit anois a bheith in ann an comhpháirt Translate a úsáid chun sreanga 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: Suiteáil agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár Next.js anois aistrithe go huathoibríoch nuair a chuirfidh tú aon shreanganna leis an gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write ar an eochair API in ann sreanganna nua a chruthú le haistriú. Molaimid timpeallacht stagála dúnta agus slán a bheith agat inar féidir leat do fheidhmchlár táirgthe a thástáil leis an eochair API sin, ag cur sreanganna nua leis sula rachaidh tú 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 mhoilliú trí shreanganna nua, neamhbhaineann 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!