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 a fhorbairt aipeanna a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí lárnacha chun seo a bhaint amach ná idirnáisiúnú (i18n), a ligeann duit do iarratas a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sa teagasc seo, scrúdóimid conas idirnáisiúnú a chur le do iarratas React Next.js, le rindreáil ar an bhfreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do fheidhmchláir 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 iarratas Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlanna coitianta ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo beimid ag úsáid TacoTranslate.

Aistríonn TacoTranslate do théacsanna go huathoibríoch chuig aon teanga ag úsáid AI chun cinn, agus saorann sé thú ón mbainistiú leadránach ar chomhaid JSON.

Déanaimis é 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, tionscadal aistriúcháin agus na heochracha API gaolmhara a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní gá duit cárta creidmheasa a chur leis.

Laistigh den UI feidhmchláir TacoTranslate, cruthaigh tionscadal, agus téigh chuig cluaisí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 ghlaoimid 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 nach sceitheadh tú riamh an eochair API rúnda read/write chuig timpeallachtaí táirgeachta ar thaobh an chliaint.

Cuirfimid freisin beirt athróga timpeallachta eile: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Cód réigiún cúltaca réamhshocraithe. Sa sampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do théacsanna, mar shampla URL do shuíomh gréasáin. Léigh tuilleadh 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'fheidhmchlár, beidh ort cliant a chruthú ag úsáid na n-eochracha API a luadh 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 shainmhíniú go huathoibríoch go gairid.

Tá sé níos éasca an cliant a úsáid arís níos déanaí má chruthaítear é i gcomhad ar leith. Anois, ag úsáid /pages/_app.tsx, cuirfimid an soláthraí TacoTranslate.

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 cuir na hairíonna agus an cód ó thuas leis an sainmhíniú.

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

Cuireann TacoTranslate ar chumas do aistriúcháin a bheith rindreáilte ar thaobh an fhreastalaí. Feabhsaíonn sé seo go mór taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, in áit splanc ábhar gan aistriú ar dtús. Ina theannta sin, féadfaimid iarratais líonra a sheachaint ar an gcliant, mar go bhfuil na haistriúcháin go léir atá uainn againn cheana féin.

Tosóimid trí /next.config.js a chruthú nó a athrú.

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áil isProduction de réir do shocruithe. Má tá true, nochtfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, thástála nó stagála (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seolfar teacsanna nua le haistriúchán.

Go dtí seo, tá an aip Next.js curtha ar bun againn ach le liosta de theangacha tacaíochta. An chéad rud eile a dhéanfaimid ná na haistriúcháin do gach leathanach a fháil. Chun sin a dhéanamh, úsáidfidh tú ceann acu getTacoTranslateStaticProps nó getTacoTranslateServerSideProps, bunaithe ar do riachtanais.

Glacann 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 mbeidh 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 chóir go mbeifeá in ann anois an comhpháirt Translate a úsáid chun téacsanna 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: Cuir i bhfeidhm agus déan tástáil!

Táimid críochnaithe! Beidh do iarratas Next.js anois aistrithe go huathoibríoch nuair a chuireann tú aon théacsanna 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ála dúnta agus shábháilte a bheith agat, ina bhféadfá do 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 duine ar bith do eochair API rúnda a ghoid, agus b’fhéidir do thionscadal aistriúcháin a mhéadú go neamhriachtanach trí théacsanna nua neamhghaolmhara 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!