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

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 feidhmchláir a fhorbairt a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla.

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

Is treoir é seo do fheidhmchláir Next.js atá ag baint úsáide as 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únú a chur i bhfeidhm i d'iarratas Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlanní coitianta ann, lena n-áirítear next-intl. Sa sampla seo, áfach, beimid ag úsáid TacoTranslate.

TacoTranslate aistríonn do théacsanna go huathoibríoch chuig aon teanga ag úsáid AI ceannródaíoch, agus saorann sé thú ón mbainistíocht leadránach ar chomhaid JSON.

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

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

Laistigh den chomhéadan úsáideora de TacoTranslate, cruthaigh tionscadal agus nascraigh chuig an táb 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

Ná nocht riamh an eochair API rúnda read/write i dtimpeallachtaí táirgeachta ar thaobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiúnach réamhshocraithe. Sa sampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar do théacsanna, mar shampla URL do shuíomh. Léigh níos mó 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 do fheidhmchlár, beidh ort cliant a chruthú ag úsáid na n-eochracha API a luadh thuas. 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;

Sainmhíneofar go huathoibríoch TACOTRANSLATE_API_KEY agus TACOTRANSLATE_PROJECT_LOCALE go luath.

Má chruthaítear an cliant i gcomhad ar leith, bíonn sé éasca é a úsáid arís níos déanaí. Is feidhm chabhrach amháin í getLocales le roinnt láimhseáil earráide ionsuite. Anoıs, cruthaigh comhad darb ainm /app/[locale]/tacotranslate.tsx, áit a gcurfaimid 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 comhpháirt taobh an chliaint é seo.

Anois go bhfuil an soláthraí comhthéacs réidh le húsáid, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an leagan fréimhe inár bhfeidhmchlár. Tabhair faoi deara go bhfuil fillteán ag an mbealach 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>
	);
}

Is é 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 bhfuil na cóid réigiúnacha go léir atá gníomhachtaithe agat don tionscadal réamh-léirithe.

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 insíonn do Next.js an leathanach a athtógáil tar éis 60 soicind, agus do aistriúcháin a choinneáil cothrom le dáta.

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

Tacaíonn TacoTranslate le rindreáil ar thaobh an fhreastalaí. Feabhsaíonn sé seo go mór taithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc d'ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarratais líonra ón gcliant a sheachaint, toisc go bhfuil na haistriúcháin a theastaíonn don leathanach atá á breathnú ag an úsáideoir againn cheana.

Chun rindreáil ar thaobh 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};
};

Cuir an seiceáil isProduction in oiriúint do do shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stáideá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 bealaí agus atreoruithe mar is ceart, beidh orainn comhad a chruthú darb ainm /middleware.ts. 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 shocrú de réir na doiciméadúcháin Next.js Middleware.

Ar an gcliant, is féidir leat an fianán locale a athrú chun teanga is fearr leis an úsáideoir a shocrú. Féach le do thoil ar an cód samplach iomlán le haghaidh smaointe ar conas é seo a dhéanamh!

Céim 5: Foilsigh agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React á aistriú go huathoibríoch anois nuair a chuireann tú aon shreangáin i gcomhpháirt Translate. Tabhair faoi deara nach iad ach timpeallachtaí a bhfuil ceadanna read/write ar an eochair API a bheidh in ann sreangáin nua a chruthú le haistriú. Molaimid timpeallacht staidéireachta dúnta agus shlándáilte a bheith agat ina mbeidh tú in ann do fheidhmchlár táirgthe a thástáil le eochair API dá leithéid, agus sreangáin nua a chur leis sular téann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus d’fhéadfadh sé fás neamhriachtanach a chruthú i do thionscadal aistriúcháin trí shreangáin nua neamhghaolta 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!