Conas idirnáisiúntaíocht a chur i bhfeidhm i bhfeidhmchlár Next.js atá ag úsáid App Router

De réir mar a éiríonn an domhan níos domhandaithe, tá sé níos tábhachtaí do fhorbróirí gréasáin aipeanna a chruthú a fhéadfaidh freastal ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí móra le seo a bhaint amach ná trí idirnáisiúnú (i18n), a ligeann duit do aip a oiriúnú do theangacha, do chuid airgeadais, agus do chruthanna dáta éagsúla.

San alt seo, déanfaimid iniúchadh ar conas idirnáisiúnú 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 do iarratais Next.js atá ag úsáid an App Router.
Má tá tú ag úsáid an Pages Router, féach ar an treoir seo ina ionad sin.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúnt 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. Sa sampla seo, áfach, beidh muid ag úsáid TacoTranslate.

Tá TacoTranslate ag aistriú do shreanganna go huathoibríoch chuig aon teanga ag baint úsáide as AI ceannródaíoch, agus saorann sé tú ó bhainistíocht chrua na gcomhad 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 a bhaineann leis. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur leis.

Laistigh de chomhéadan úsáideora na bhfeidhmchlár TacoTranslate, cruthaigh tionscadal, agus téigh chuig an tá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 rud a ghlaoimid public, agus is é an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i fréamh do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Bí cinnte gan riamh an eochair API rúnda read/write a scaipeadh chuig timpeallachtaí táirgthe 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 do leagan teanga clárúcháin. Sa sampla seo, socrófaimid é go en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina gcoimeádfar do shlabhraí téacs, amhail URL do shuíomh gréasáin. Léigh níos mó faoi na bunáiteacha anseo.

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

Céim 3: Ag socrú TacoTranslate

Chun TacoTranslate a chomhtháthú le do fheidhmchlár, beidh ort cliant a chruthú ag úsáid na eochracha API ón gcéad chéim. 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Beimid ag sainmhíniú go huathoibríoch TACOTRANSLATE_API_KEY agus TACOTRANSLATE_PROJECT_LOCALE go luath.

Ag cruthú an chliaint i gcomhad ar leithligh déanann sé é a úsáid go héasca arís níos déanaí. Is feidhm chabhrach í getLocales le roinnt láimhseáil earráide ionsuite. Anois, cruthaigh comhad darb ainm /app/[locale]/tacotranslate.tsx, ansin cuirfimid an soláthraí TacoTranslate i bhfeidhm.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Tabhair faoi deara an 'use client'; ag léiriú gur comhlacht cliant é seo.

Leis an soláthraí comhthéacs ullmhaithe anois, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an leagan fréimhe inár n-iarratas. Tabhair faoi deara go bhfuil fillteán ag an mbealach seo ag úsáid Dynamic Routes, áit a bhfuil [locale] mar an paraiméadar dinimiciúil.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

An chéad ní le tabhairt faoi deara anseo ná go bhfuilimid ag úsáid ár bparaiméadar Dynamic Route [locale] chun aistriúcháin don teanga sin a fháil. Ina theannta sin, tá generateStaticParams ag déanamh cinnte go bhfuil gach cód áitiúil atá gníomhach agat do do thionscadal réamh-léirithe.

Anois, déanaimis ár leathanach chéad a thógáil! Cruthaigh comhad darb ainm /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Tabhair faoi deara an athróg revalidate a insítear do Next.js an leathanach a ath-thógáil tar éis 60 soicind, agus do chuid aistriúchán a choinneáil cothrom le dáta.

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

Tacaíonn TacoTranslate le léiriú ar an taobh freastalaí. Feabhsaíonn sé seo an taithí úsáideora go mór 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 a scipeáil ar an gcliant, toisc go bhfuil na haistriúcháin atá uainn don leathanach atá an t-úsáideora ag breathnú air againn cheana féin.

Chun aistriú taobh an fhreastalaí a bhunú, cruthaigh nó déan modhnú ar /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Athraigh an seiceáil isProduction chun oiriúnú do do shocraithe. Má tá true ann, léireoidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó réamhsheolta (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar sraitheanna nua le haistriú.

Chun a chinntiú go n-oibríonn rianú agus athdhíriú mar a bheas súil leis, beidh orainn comhad darbh ainm /middleware.ts a chruthú. Ag úsáid Middleware, is féidir linn úsáideoirí a athdhíriú chuig leathanaigh a chuirtear i láthair ina dteanga tosaíochta.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Déan cinnte an matcher a shocrú de réir doiciméadúcháin Middleware Next.js.

Ar an gcustaiméir, is féidir leat an fianán locale a athrú chun teanga tosaigh an úsáideora a athrú. Féach le do thoil ar an cód samplach iomlán leideanna ar conas é seo a dhéanamh!

Cesium 5: Cuir i bhfeidhm agus déan tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React anois aistrithe go huathoibríoch nuair a chuirfidh tú aon shnáitheanna leis an gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write acu ar an eochair API in ann snáithí nua a chruthú le haistriú. Molaimid timpeallacht stáisiúin dúntha agus shlán a bheith agat ina féidir leat do fheidhmchlár táirgeachta a thástáil le heochair API den chineál sin, snáithí nua a chur leis sula dtéann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith d’eochair rúnda API a ghoid, agus b’fhéidir go méadóidh sé tionscadal do aistriúchán trí shnáithí nua, neamhtheagmháil 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 Pages 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!