Conas idirnáisiúntaíocht a chur i bhfeidhm i iarratas Next.js atá ag úsáid 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 oireann do úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí ríthábhachtacha chun seo a bhaint amach ná trí idirnáisiúntacht (i18n), a ligeann duit do aip a oiriúnú do theangacha, do churais airgeadais, agus do fhormáidí dáta éagsúla.

Sna ranganna teagaisc seo, déanfaimid iniúchadh ar conas idirnáisiúntacht a chur le d’iarratas React Next.js, le léiriú taobh an fhreastalaí. TL;DR: Féach ar an sampla iomlán anseo.

Tá an treoir seo do iarratais 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 áit.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúntaíocht 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. Áfach, sa sampla seo, úsáidfimid TacoTranslate.

Déantar TacoTranslate do shreanga a aistriú go huathoibríoch chuig aon teanga ag úsáid AI nuálaí, agus scaoileann sé saor tú ó bhainistíocht tedious comhad JSON.

Lig dúinn é a shuiteáil ag baint úsáide as npm i do théarmaí:

npm install tacotranslate

Céim 2: Cruthaigh cuntas saor in aisce TacoTranslate

Ansin, anois go bhfuil an modúl suiteáilte agat, is am chun do chuntas TacoTranslate a chruthú, tionscadal aistriúcháin, agus eochracha API gaolmhara. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur leis.

Laistigh den chomhéadan úsáideora de chuid an aip TacoTranslate, cruthaigh tionscadal, agus téigh go cluaisín na n-eochracha API atá ann. Cruthaigh eochair amháin read, agus eochair amháin read/write. Sábhálfaimid iad mar athróga comhshaoil. Is é an eochair read an rud a thugaimid public uirthi agus is é an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i mbonn do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Bí cinnte nach scaoileann tú riamh an eochair API rúnda read/write chuig timpeallachtaí táirgthe taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe don logán a thabharfaidh aghaidh uirthi. Sa sampla seo, leanfaimid leis an 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 bhuanna 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 eochracha API ó roimhe seo. 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.

Ag cruthú an chliaint i gcomhad ar leithligh déanann sé níos éasca í a úsáid arís níos déanaí. Anois, ag úsáid /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 hairíonna agus an cód atá thuas.

Céim 4: Ag cur i bhfeidhm léirithe taobh an fhreastalaí

Ligeann TacoTranslate do léiriú taobh an fhreastalaí de do aistriúcháin. Feabhsaíonn sé seo go mór taithí an úsáideora trí thaispeáint ábhar aistrithe láithreach, in áit tosaigh ghealán d’ábhar gan aistriú. Ina theannta sin, is féidir linn iarraidh líonra ar an gcustaiméir a sheachaint, toisc go bhfuil na haistriúcháin atá uainn againn cheana féin.

Tosóimid trí chruthú nó modhnú /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'),
	});
};

Mionathraigh an seiceáil isProduction chun oiriúnú do do shocraithe. Mura bhfuil an luach true, taispeánfaidh TacoTranslate an eochair API poiblí. 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 sreinge nua le haghaidh aistriúcháin.

Go dtí seo, ní raibh againn ach liosta de na teangacha tacaíochta a shocrú don iarratas Next.js. An chéad rud eile a dhéanfaidh muid ná aistriúcháin a fháil do do na leathanaigh go léir. Chun é sin a dhéanamh, úsáidfidh tú nó getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do riachtanais.

Tógann na feidhmeanna seo trí argóint: ceann amháin de chineál Next.js Static Props Context, cumraíocht do TacoTranslate, agus airíonna roghnach Next.js. Tabhair faoi deara go bhfuil revalidate ar getTacoTranslateStaticProps socraithe go 60 de ghnáth, ionas go mairfidh do aistriúcháin suas chun dáta.

Chun aon cheann de na feidhmeanna seo a úsáid i leathanach, déanaimis glacadh 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 go mbeifeá in ann anois an comhpháirt Translate a úsáid chun stríoca 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: Cuir i bhfeidhm agus déan tástáil!

Tá muid críochnaithe! Beidh do iarratas React aistrithe go huathoibríoch anois nuair a chuirfidh tú aon shreanga leis an gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write acu ar an eochair API in ann sreanga nua a chruthú le haistriú. Molaimid timpeallacht staging dúnta agus shlán a bheith agat ina féidir leat do iarratas táirgthe a thástáil le heochair API den sórt sin, ag cur sreang nua leis sula gcuirtear beo é. Coscfaidh sé seo ar dhuine ar bith d’eochair API rúnda a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a mhéadú go neamhghnách trí shreanganna nua, neamhghaolta a chur leis.

Déan cinnte amharc ar an sampla iomlán ar phróifíl GitHub againn. Ansin, gheobhaidh tú sampla freisin ar conas é seo a dhéanamh ag úsáid App Router! Má thugann tú aghaidh ar aon fhadhbanna, ná bíodh drogall ort teagmháil a dhéanamh, agus beidh áthas orainn cabhrú leat.

Ligeann TacoTranslate duit do chuid iarratais React a áitiúnú go huathoibríoch go tapa chuig agus ó níos mó ná 75 teanga. Tosaigh inniu!