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 domhanda, tá sé ag éirí níos tábhachtaí do fhorbróirí gréasáin feidhmchláir a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí príomhúla chun é seo a bhaint amach ná idirnáisiúnú (i18n), a ligeann duit do fheidhmchlár a oiriúnú do theangacha éagsúla, do airgeadraí agus do fhormáidí dáta.

Sa teagasc seo, beimid ag iniúchadh 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 dírithe ar iarratais Next.js atá ag úsáid an Pages Router.
Má tá tú ag úsáid an App Router, féach le do thoil ar an 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 leabharlannacha coitianta ann, lena n-áirítear next-intl. Mar sin féin, san sampla seo, úsáidfimid TacoTranslate.

Aistríonn TacoTranslate do théacsanna go huathoibríoch go haon teanga ag úsáid AI den scoth, agus saorann sé tú ón mbainistíocht leadránach ar chomhaid JSON.

Suiteálfaimid é 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 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 UI iarratais TacoTranslate, cruthaigh tionscadal, agus téigh chuig an táb 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 thugaimid public, agus is í an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i bhfréamh 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 sceitheadh chuig timpeallachtaí táirgeachta taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiúin réamhshocraithe. Sa shampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stóráilfear do théacsanna, mar shampla URL do shuíomh. Léigh tuilleadh faoi bhunfhoinsí anseo.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Céim 3: Ag socrú TacoTranslate

Chun TacoTranslate a chomhtháthú le do iarratas, beidh ort cliant a chruthú ag úsáid na n-eochracha API a fuair tú 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;

Déanfaimid TACOTRANSLATE_API_KEY a shainiú go huathoibríoch go gairid.

Trí an cliant a chruthú i gcomhad ar leith, tá sé níos éasca é a úsáid arís níos déanaí. Anois, trí úsáid a bhaint 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, le do thoil leathnaigh an sainmhíniú leis na hairíonna agus an cód thuasluaite.

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

Ligeann TacoTranslate duit do aistriúcháin a rindreáil ar thaobh an fhreastalaí. Feabhsaíonn sé seo an taithí úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc d’ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, níl orainn iarraidhí líonra a sheoladh ón gcliant, 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 shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stáideála (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seolfar téacsanna nua le haghaidh aistriú.

Go dtí seo, tá an aip Next.js curtha ar bun againn le liosta de theangacha tacaithe. An chéad rud eile a dhéanfaimid ná aistriúcháin a fháil do gach ceann de do leathanaigh. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps, ag brath ar do riachtanais.

Tógann na feidhmeanna seo trí argóintí: réad 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 ar 60 de réir réamhshocraithe, ionas go bhfanfaidh do aistriúcháin cothrom le dáta.

Chun aon cheann de na feidhmeanna seo a úsáid i leathanach, glacaimid 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 go mbeifeá anois in ann an chomhpháirt Translate a úsáid chun sreanga 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: Seol agus tástáil!

Táimid críochnaithe! Beidh d’iarratas Next.js aistrithe go huathoibríoch anois nuair a chuireann tú aon théacsanna isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí lena bhfuil ceadanna read/write ar an eochair API in ann téacsanna nua a chruthú le haistriú. Molaimid timpeallacht stáide dúnta agus shlán a bheith agat ina bhféadfá d’iarratas táirgeachta a thástáil leis an eochair API sin, agus téacsanna nua a chur leis sula dtéann tú beo. Coscfaidh sé seo ar dhuine ar bith do eochair rúnda API a ghoid, agus d’fhéadfadh sé méadú neamhriachtanach ar do thionscadal aistriúcháin a chur faoi deara trí théacsanna nua neamghaolmhaire 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!