Conas idirnáisiúntacht 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 feidhmchláir a thógáil atá in ann freastal ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí príomhúla chun é seo a bhaint amach is ea trí idirnáisiú (i18n), a ligeann duit d’fheidhmchlár a oiriúnú do theangacha, do chistí, agus do fhormáidí dáta éagsúla.

TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo dírithe ar fheidhmchláir 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úntacht a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid leis an gcéad dul síos leabharlann i18n. Tá roinnt leabharlann coitianta ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, beidh muid ag úsáid TacoTranslate.

Tá TacoTranslate ag aistriú do theachtaireachtaí go huathoibríoch chuig aon teanga ag baint úsáide as AI ceannródaíoch, agus saorann tú ó bhainistíocht leadránach comhad JSON.

Déanfaidh muid é 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 a chruthú, tionscadal aistrithe, agus eochracha API a bhaineann leis. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl aon riachtanas cárta creidmheasa a chur leis.

Laistigh den Chomhéadan Úsáideora (UI) d’aip TacoTranslate, cruthaigh tionscadal, agus téigh go dtí a tháb eochracha API. Cruthaigh ceann amháin read eochair, agus ceann amháin read/write eochair. 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 isteach i gcomhad .env i mbonn do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Bí cinnte gan riamh an eochair API rúnda read/write a nochtadh do thimpeallachtaí táirgthe taobh an chliaint.

Cuirfimid bearta timpeallachta breise beirt eile leis freisin: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe don teanga dhúnta. Sa sampla seo, socróimid é chuig en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stóráilfear do shreingeanna, 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 sainmhíniú go huathoibríoch TACOTRANSLATE_API_KEY go luath.

Ag cruthú an chliaint i gcomhad ar leithligh cuireann 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íne an sainmhíniú leis na hairíonna agus an cód thuas.

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

Ligeann TacoTranslate do léiriú taobh an fhreastalaí do do aistriúchán. Cuireann sé seo feabhas mór ar thaithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, seachas splanc d’ábhar neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonraithe ar an gcustaiméir a sheachaint, mar tá na haistriúcháin go léir atá uainn againn cheana féin.

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

Athraigh an seiceáil isProduction chun oiriúnú do do chumraíochta. Má tá true, taispeánfaidh TacoTranslate an eochair API poiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó staidéir (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar sreinge nua le haistriúchán.

Go dtí seo, níor shocraigh muid ach an feidhmchlár Next.js le liosta de theangacha tacaithe. Is é 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, úsáidfidh tú getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do chuid riachtanas.

Glacann na feidhmeanna seo trí argóint: One Next.js Static Props Context object, cumraíocht do TacoTranslate, agus airíonna Next.js roghnacha. Tabhair faoi deara go bhfuil revalidate ar getTacoTranslateStaticProps socraithe go 60 de réir réamhshocraithe, ionas go bhfanfaidh d'aistriúcháin cothrom le dáta.

Chun ceachtar feidhm a úsáid i leathanach, glacaimis leis go bhfuil comhad leathanaigh agat mar /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 comhpháirt Translate a úsáid chun sreanga a aistriú laistigh de do gach comhpháirt React.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Céim 5: Déan an cur i bhfeidhm agus déan tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React aistrithe go huathoibríoch anois nuair a chuireann tú aon shreanga leis an Translate comhpháirt. 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áitse dúnta agus shlán a bheith agat ina bhféadfaidh tú do fheidhmchlár táirgthe a thástáil le heochair API den chineál sin, ag cur sreang nua leis sula ndéantar beo é. Cuirfidh sé seo cosc ar dhuine ar bith do eochair rúnda API a ghoid, agus ar chumas do thionscadal aistriúcháin a mhéidniú trí shreanga nua, neamhtheagmhála a chur leis.

Bí cinnte duineach an sampla iomlán a sheiceáil atá againn ar ár bpróifíl GitHub. Ansin, gheobhaidh tú sampla freisin conas é seo a dhéanamh ag úsáid an App Router ! Má thagann tú trasna ar aon fhadhbanna, bíodh leisce ort teagmháil a dhéanamh, agus beidh áthas orainn cabhrú leat.

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