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 feidhmchláir a thógáil is féidir leo freastal ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí ríthábhachtacha chun é seo a bhaint amach ná trí idirnáisiúniú (i18n), a ligeann duit d’fheidhmchlár a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sna hailt seo, pléifimid conas idirnáisiúniú a chur le do fheidhmchlár React Next.js, le léiriú taobh an fhreastalaí. TL;DR: Féach an sampla iomlán anseo.

Tá an treoir seo do fheidhmchláir Next.js atá ag úsáid App Router.
Má tá tú ag úsáid Pages Router, féach an treoir seo ina ionad.

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúntaíocht 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.

Tá TacoTranslate ag aistriú do shreanganna go huathoibríoch chuig aon teanga ag úsáid AI nua-aimseartha, agus saorann sé tú ó bhainistíocht leadránach na gcomhad JSON.

Lig dúinn é a shuiteáil ag úsáid npm i do théarmaí:

npm install tacotranslate

Céim 2: Cruthaigh cuntas TacoTranslate saor in aisce

Anois go bhfuil an modúl suiteáilte agat, is am chun do chuntas TacoTranslate a chruthú, tionscadal aistriúcháin, agus eochracha API gaolmhara. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl ort cárta creidmheasa a chur leis.

Laistigh den chomhéadan úsáideora TacoTranslate, cruthaigh tionscadal, agus nascraigh chuig cluaisín na n-eochracha API aige. Cruthaigh eochair amháin read, agus eochair amháin read/write. Sábhálfaimid iad mar athróga chomhshaoil. Is é an eochair read an rud a thugaimid air public, agus is é an eochair read/write an rud a thugaimid air secret. Mar shampla, d’fhéadfá iad a chur leis i gcomhad .env i bhfréamh do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Déan cinnte gan eochair API rúnda read/write a scaipeadh riamh chuig timpeallachtaí táirgthe taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe áitiúil fillte. Sa sampla seo, socrófaimid é go en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórálfar do shreingeanna, amhail URL do shuíomh gréasáin. Léigh tuilleadh faoi fhreagrachtaí anseo.

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

Céim 3: Ag socrú TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 sínte go huathoibríoch TACOTRANSLATE_API_KEY agus TACOTRANSLATE_PROJECT_LOCALE go luath.

Má chruthaíonn tú an cliant i gcomhad ar leithligh, is furasta é a úsáid arís níos déanaí. getLocales ach feidhm fóntais le roinnt láimhseáil earráidí 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'; ag léiriú go bhfuil sé seo ina chomhpháirt chliaint.

Leis an soláthraí comhthéacs anois réidh le dul, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an leagan fréimhe inár n-iarratas. Tabhair faoi deara go bhfuil an cosán seo ag baint úsáide as feidhmchláir Dynamic Routes, áit ar tugtar [locale] ar 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 an paraiméadar Dynamic Route [locale] chun aistriúcháin don teanga sin a fháil. Chomh maith leis sin, tá generateStaticParams ag cinntiú go bhfuil gach cód áitiúil atá gníomhach 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 deir le Next.js an leathanach a ath-thógáil tar éis 60 soicind, agus do aistriúcháin a choinneáil suas chun dáta.

Céim 4: Ag cur i bhfeidhm táirgeadh taobh an fhreastalaí

Tacaíonn TacoTranslate le léiriú taobh an fhreastalaí. Feabhsaíonn sé seo an taithí úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, in áit splanc den ábhar neamhaistrithe ar dtús. Chomh maith leis sin, is féidir linn iarraidh líonra ar an gcliant a sheachaint, toisc go bhfuil na haistriúcháin a theastaíonn dúinn don leathanach a bhfuil an t-úsáideoir ag féachaint air againn cheana.

Chun cur i bhfeidhm ar an ndáil rindreála taobh an fhreastalaí, 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 shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stéigeach (isProduction is false), úsáidfimid an eochair rúnda API read/write chun a chinntiú go seoltar sreanganna nua le haistriúchán.

Chun a chinntiú go n-oibríonn beartaithe agus athbheartaíocht mar a bheifí ag súil leis, beidh orainn comhad darb ainm /middleware.ts a chruthú. Ag úsáid Middleware, is féidir linn úsáideoirí a atreorú chuig leathanaigh atá curtha 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 doiciméadú Meánmhéadair Next.js.

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

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

Táimid críochnaithe! Beidh do app React aistrithe go huathoibríoch anois nuair a chuireann 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 haistriúchán. Molaimid timpeallacht stáitse dúnta agus slán a bheith agat ina bhféadfaidh tú do app táirgthe a thástáil le eochair API mar sin, ag cur sreangacha nua leis sula mbeimid beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus b’fhéidir go méadóidh sé an tionscadal aistriúcháin trí shreangaí nua, neamhtheangacha a chur leis.

Bí cinnte féach ar an sampla iomlán atá ar fáil ar ár bpróifíl GitHub. Ansin, gheobhaidh tú sampla freisin den chaoi le seo a dhéanamh ag baint úsáide as an Pages Router! Má bhíonn fadhbanna agat, ná bíodh aon leisce ort déan teagmháil, agus beidh áthas orainn cabhrú leat.

Ceadaíonn TacoTranslate duit do chuid feidhmchlár React a fhreagrachtáil go huathoibríoch go tapa chuig agus ó aon teanga. Tosaigh inniu!