An réiteach is fearr do idirnáisiúntaíocht (i18n) i bhfeidhmchláir Next.js

Conas a oibríonn sé

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 iarratais a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí is tábhachtaí chun é seo a bhaint amach ná trí idirnáisiúniú (i18n), a ligeann duit do chuid iarratais a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sna ranganna teagaisc seo, beimid ag déanamh iniúchta ar conas idirnáisiúniú a chur le d’iarratas React Next.js, le léiriú ar thaobh an fhreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo d’iarratais Next.js atá á n-úsáid ag an Pages Router.
Má tá tú ag úsáid an App Router, féach an treoir seo ina ionad.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúnt a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlann coitianta ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, beidh muid ag úsáid TacoTranslate.

Déantar TacoTranslate do shraitheanna a aistriú go huathoibríoch chuig aon teanga ag baint úsáide as AI nua-aimseartha, agus scaoileann sé saor thú ó bhainistíocht leadránach comhad JSON.

Lig dúinn é a shuiteáil ag úsáid 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í éilíonn sé ort cárta creidmheasa a chur leis.

Laistigh den UI aip TacoTranslate, cruthaigh tionscadal, agus téigh chuig an cluaisín eochracha API. Cruthaigh eochair amháin read, agus eochair amháin eile read/write. Sábhálfaimid iad mar athróga comhshaoil. Is é an eochair read atá a dtugaimid public uirthi agus is é an eochair read/write an eochair 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 gan an eochair API rúnda read/write a sceitheadh riamh chuig timpeallachtaí táirgeachta taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe don teanga athshlánaithe. Sa sampla seo, socróimid é go en do Béarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stóráilfear do shreingeanna, mar shampla URL do shuímh ghré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 ó 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;

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 baint úsáide as /pages/_app.tsx saincheaptha, cuirfimid 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, leathnaigh an sainmhíniú leis na hairíonna agus an cód thuas.

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

Ligeann TacoTranslate do léiriú taobh an fhreastalaí 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 ábhair neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra ar an gcliant a sheachaint, toisc 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'),
	});
};

Athraigh an seiceála isProduction chun freastal ar do shocrú. Mura bhfuil an luach true ann, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stáitse (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go seoltar na slabhraí nua le haistriúchán.

Go dtí seo, ní raibh againn ach liosta de na teangacha tacaithe a socrú don iarratas Next.js. An chéad rud eile a dhéanfaimid ná aistrithe a fháil do gach ceann de do leathanaigh. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps nó getTacoTranslateServerSideProps bunaithe ar do chuid riachtanas.

Tugann 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 mbeidh do aistriúcháin cothrom le dáta.

Chun aon cheann den dá fheidhm 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 comhlacht Translate a úsáid chun srings a aistriú laistigh de do gach comhlacht React.

import {Translate} from 'tacotranslate/react';

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

Céim 5: Déan foilsiú agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár Next.js anois aistrithe go huathoibríoch nuair a chuirfidh tú aon shreanga chuig comhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write ar an eochair API in ann sreanga nua a chruthú le haghaidh aistriúcháin. Molaimid timpeallacht stáitse dún agus slán a bheith agat inar féidir leat do fheidhmchlár táirgthe a thástáil leis an eochair API sin, ag cur sreanga nua leis sular téann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus go bhféadfaidh sé do thionscadal aistriúcháin a mhéadú go mídhleathach trí shreanga nua, neamhtheagmhálacha 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!