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

De réir mar a éiríonn an domhan níos idirnáisiúnta, tá sé níos tábhachtaí do fhorbróirí gréasáin aipeanna a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí tábhachtacha chun é seo a bhaint amach ná trí idirnáisiúniú (i18n), a ligeann duit do aip a oiriúnú do theangacha, do n-airgeadraí, agus do fhormáidí dáta éagsúla.

Sna chéad alt seo, déanfaimid iniúchadh ar conas idirnáisiúniú a chur le do aip React Next.js, le léiriú taobh freastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo dírithe ar aipeanna Next.js atá ag úsáid an App Router.
Má tá tú ag úsáid an Pages Router, féach an treoir seo in ionad sin.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúntacht a chur i bhfeidhm i do fheidhmchlár 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.

Déantar TacoTranslate do shlintí a aistriú go huathoibríoch chuig aon teanga ag úsáid AI chun tosaigh, agus scaoiltear tú ó bhainistíocht leadránach na gcomhad JSON.

Déanaimis é a shuiteáil ag úsáid npm i do thearmann:

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 chomptas TacoTranslate, tionscadal aistriúcháin, agus eochracha API atá bainteach a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl ort cárta creidmheasa a chur leis.

Laistigh den UI aip TacoTranslate, cruthaigh tionscadal, agus tabhair cuairt ar a cluaisín eochracha API. Cruthaigh eochair amháin read, agus eochair amháin read/write. 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 in áit i gcomhad .env i mbonn do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Bí cinnte gan riamh an eochair API rúnda read/write a sceitheadh chuig timpeallachtaí táirgeachta taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód tuirlingthe réamhshocraithe. San sampla seo, leanfaimid ar en don Bhéarla é.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do shnáitheanna, mar shampla URL do shuíomh gréasáin. Léigh níos mó faoi thúsanna 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 luath-ama. 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;

Beidh muid 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é éasca é a úsáid arís níos déanaí. Is fheidhm chabhrach í getLocales le roinnt láimhseála earráide tógtha isteach. 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 gur chomhpháirt cliant é seo.

Leis an soláthraí comhthéacs réidh anois le dul, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, leagan fréimhe inár n-iarratas. Tabhair faoi deara go bhfuil fillteán sa bhealach 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 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 cinntiú go ndéantar gach cód áitiúil a d’ainneoin tú don tionscadal a réamh-labhairt.

Anois, déanaimis ár gcéad leathanach 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 deir le Next.js an leathanach a ath-thógáil i ndiaidh 60 soicind, agus do bhuachanna a choinneáil cothrom le dáta.

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

Tacaíonn TacoTranslate le léiriú taobh an fhreastalaí. Feabhsaíonn sé seo an taithí úsáideora go mór trí chur i láthair ábhar aistrithe láithreach, in ionad splanc ábhair nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra a scipeáil ar an gcliant, mar tá na haistriúcháin atá againn don leathanach atá an t-úsáideoir ag féachaint air cheana féin.

Chun dúchas taobh an tseirbhíse a shocrú, cruthaigh nó modhnú /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, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stádála (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar sruthanna nua le haghaidh aistriúcháin.

Chun a chinntiú go n-oibríonn rianú agus athrátáil mar is ceart, beidh ort comhad darb ainm /middleware.ts a chruthú. Ag baint úsáide as Middleware, is féidir linn úsáideoirí a athrú go leathanaigh atá curtha i láthair ina dteanga is fearr leo.

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ú Idirthréimse Next.js.

Ar an gcliant, is féidir leat an fianán locale a athrú chun a athrú cén teanga atá tosaíocht ag an úsáideoir. Féach le do thoil an cód samplach iomlán!

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

Táimid críochnaithe! Beidh d’iarratas React aistrithe go huathoibríoch anois nuair a chuirfidh tú aon shreangaí le comhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write ar an eochair API in ann sreangaí nua le haistriú a chruthú. Molaimid timpeallacht stáisiúin dáilte dúnta agus slán a bheith agat ina féidir leat d’iarratas táirgthe a thástáil leis an eochair API sin, sreangaí nua á gcuirint sula dtéann tú beo. Chosnódh sé seo i gcoinne éigniú d’eochair API rúnda, agus go bhféadfadh sé do thionscadal aistriúcháin a mhéadú go neamhghnách trí shreangaí nua, neamhtheagmhála a chur leis.

Bí cinnte seiceáil amach an sampla iomlán atá ar fáil ar ár bpróifíl GitHub. Anseo, gheobhaidh tú sampla freisin ar conas é sin a dhéanamh ag úsáid Pages Router! Má tharlaíonn aon fhadhbanna ort, ná bíodh drogall ort teagmháil a dhéanamh, agus beidh áthas orainn cabhrú leat.

Ligeann TacoTranslate duit d’iarratais React a áitiú go huathoibríoch go tapa chuig agus ó aon teanga. Tosnaigh inniu!