Conas idirnáisiúnt a chur i bhfeidhm i bhfeidhmchlár Next.js atá ag úsáid an Pages Router

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 thógáil a oireann do úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí tábhachtacha chun é seo a bhaint amach ná trí idirnáisiúntacht (i18n), a thugann deis duit d’iarratas a oiriúnú do theangacha éagsúla, do chuid airgeadais, agus do fhormáidí dáta éagsúla.

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

Tá an treoir seo dírithe ar fheidhmchláir Next.js atá ag baint úsáide as Pages Router.
Má tá tú ag baint úsáide as App Router, féach an treoir seo in áit.

Céim 1: Cuir leabharlann i18n isteach

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

Déantar TacoTranslate do shnáitheanna a aistriú go huathoibríoch chuig aon teanga ag baint úsáide as AI den scoth, agus scaoileann sé thú ón bpróiseas tuirsiúil bainistíochta comhad JSON.

Déanaimis é a shuiteáil ag baint úsáide as npm i do chríochfort:

npm install tacotranslate

Céim 2: Cruthaigh cuntas saor in aisce TacoTranslate

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

Laistigh de chomhéadan úsáideora an aip TacoTranslate, cruthaigh tionscadal, agus nascleanúint chuig an táb eochracha 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 leis i gcomhad .env i mbunachar 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 taobh an chliaint.

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

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

Beidh muid ag shonrú 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 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 déan an sainmhíniú a shíneadh leis na hairíonna agus an cód thuas.

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

Ligeann TacoTranslate do léiriú taobh an fhreastalaí a dhéanamh ar do aistriúcháin. Feabhsaíonn sé seo go mór an taithí úsáideora trí ábhar aistrithe a thaispeáint láithreach, in ionad splancán de ábhar neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh ar an líonra ar an gcliant a scipeáil, toisc go bhfuil na haistriúcháin uile atá uainn againn cheana féin.

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

Modhnigh an seiceála isProduction chun oiriúnú do do shocraithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stagála (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar stríoca nua le haistriúchán.

Go dtí seo, níor shocraíomar ach liosta de theangacha a thacaítear leo don iarratas Next.js. An chéad rud eile a dhéanfaidh muid ná aistriúcháin a fháil do do gach leathanach. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do chuid riachtanas.

Glacann na feidhmeanna seo trí argóintí: Aon 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 mbíonn do aistriúcháin cothrom le dáta.

Chun aon cheann de na feidhmeanna seo a úsáid i leathanach, déanaimis samhail gur 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 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: Déan tarchur agus tástáil!

Táimid déanta! Beidh do iarratas React níos tuilleadh aistrithe go huathoibríoch anois nuair a chuirfidh tú aon shreanga leis an gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write ar an eochair API in ann sreanga nua a chruthú le haistriú. Molaimid timpeallacht stéidéar dúnta agus shábháilte a bheith agat áit is féidir leat do iarratas táirgthe a thástáil le eochair API den sórt sin, ag cur sleamhnáin nua leis sula dtéann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair rúnda API a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a fhorlíonadh trí shreanga nua, neamhbhaintach a chur leis.

Bí cinnte go bhféachfaidh tú ar an sampla iomlán ar phróifíl GitHub againn. Ann, gheobhaidh tú sampla freisin ar conas seo a dhéanamh ag úsáid an App Router! Má thagann fadhbanna ort, ná bíodh aon leisce ort déan teagmháil
Ligeann TacoTranslate duit do chuid iarratais React a áitiúnú go huathoibríoch go tapa chuig agus ó aon teanga. Tosaigh inniu!