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

De réir mar atá an domhan ag éirí níos idirnáisiúnta, tá sé ag éirí níos tábhachtaí do fhorbróirí gréasáin feidhmchláir a fhorbairt a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí is tábhachtaí chun seo a bhaint amach ná idirnáisiúnú (i18n), a chuireann ar do chumas do fheidhmchlár a oiriúnú do theangacha, do airgeadraí agus do fhormáidí dáta éagsúla.

San alt seo, scrúdóimid conas idirnáisiúnú a chur le do fheidhmchlár React Next.js, le léiriú ar an taobh freastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do fheidhmchláir 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.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúnú a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid ar dtús leabharlann i18n. Tá roinnt leabharlanna coitianta ann, lena n-áirítear next-intl. Sa sampla seo, áfach, bainfimid úsáid as TacoTranslate.

Aistríonn TacoTranslate do théacsanna go huathoibríoch chuig aon teanga ag úsáid AI ceannródaíoch, agus saorann sé thú ó bhainistiú leadránach na gcomhad JSON.

Déanaimis é a shuiteáil ag baint úsáide as 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 comhfhreagracha a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur leis.

Laistigh den chomhéadan úsáideora (UI) den aip TacoTranslate, cruthaigh tionscadal agus téigh chuig cluaisín na 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 i gcomhad .env i bhfréamh do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Déan cinnte nach nochtfar riamh an eochair API rúnda read/write do thimpeallachtaí táirgthe ar thaobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cód réamhshocraithe an réigiúin teanga. Sa shampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do shreanga téacs, mar shampla URL do shuíomh gréasáin. 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 d’aip, beidh ort cliant a chruthú ag baint úsáide as na heochracha API a luaigh muid 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Déanfaimid sainmhíniú ar TACOTRANSLATE_API_KEY agus TACOTRANSLATE_PROJECT_LOCALE go huathoibríoch go luath.

Má chruthaítear an cliant i gcomhad ar leith, bíonn sé éasca é a úsáid arís níos déanaí. getLocales is feidhm chabhrach í le roinnt láimhseála earráide ionsuite. Anois cruthaigh comhad darb ainm /app/[locale]/tacotranslate.tsx, áit a gcuirfimid 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'; a léiríonn go bhfuil sé seo ina chomhpháirt chliaint.

Nuair atá an soláthraí comhthéacs réidh le húsáid, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an leagan amach fréimhe inár n-iarratas. Tabhair faoi deara go bhfuil fillteán sa chonair seo a úsáideann 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 rud 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 ndéantar réamhléiriú ar na cóid réigiúnacha uile a ghníomhachtaigh tú do do thionscadal.

Anois, tógfaimid ár gcéad leathanach! 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íonn do Next.js an leathanach a ath-thógáil tar éis 60 soicind, agus a choinneoidh do chuid aistriúchán suas chun dáta.

Céim 4: Cur i bhfeidhm rindreáil ar thaobh an fhreastalaí

Tacaíonn TacoTranslate le rindreáil ar thaobh an fhreastalaí. Cuireann sé seo feabhas mór ar thaithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc d'ábhar nach bhfuil aistrithe ar dtús. Thairis sin, is féidir linn iarraidhí líonra ar an gcliant a sheachaint, toisc go bhfuil na haistriúcháin a theastaíonn don leathanach atá an t-úsáideoir ag féachaint orthu againn cheana.

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

Chun a chinntiú go n-oibríonn an rútiú agus an atreorú mar a bheartaítear, beidh orainn comhad darb ainm /middleware.ts a chruthú. Ag baint úsáide as Middleware, is féidir linn úsáideoirí a atreorú chuig leathanaigh a gcuirtear i láthair ina dteanga roghnaithe.

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 chur ar bun de réir doiciméadú Middleware Next.js.

Ar an gcliant, is féidir leat an fianán locale a athrú chun teanga roghnaithe an úsáideora a shocrú. Féach le do thoil ar an sampla iomlán den chód chun smaointe a fháil ar conas é seo a dhéanamh!

Céim 5: Cuir i bhfeidhm agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React á aistriú go huathoibríoch anois nuair a chuirfidh tú aon théacsanna isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write ag an eochair API in ann téacsanna nua a chruthú le haistriú. Molaimid timpeallacht stáideála dhúnta agus shlán a bheith agat, áit ar féidir leat do fheidhmchlár táirgeachta a thástáil le eochair API den sórt sin agus téacsanna nua a chur leis roimh dul beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus féadfaidh sé cosc a chur ar do thionscadal aistriúcháin a líonadh go hachamair le téacsanna nua neamhnascacha.

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!