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é ag éirí níos tábhachtaí do fhorbróirí gréasáin aipeanna a fhorbairt a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na bealaí lárnacha chun é seo a bhaint amach ná idirnáisiúnú (i18n), a ligeann duit do aip a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.

Sa t-alt seo, beimid ag iniúchadh conas idirnáisiúnú a chur le d’iarratas React Next.js, lena n-áirítear rindreáil ar thaobh an fhreastalaí. TL;DR: Féach ar 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 iarratas Next.js, roghnóimid ar dtús leabharlann i18n. 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é tú ón mbainistíocht leadránach ar chomhaid JSON.

Suiteáilfimid é ag úsáid 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, is é an t-am anois do chuntas TacoTranslate, tionscadal aistriúcháin agus na heochracha API a bhaineann leo a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní gá duit cárta creidmheasa a chur leis.

Sa chomhéadan úsáideora de TacoTranslate, cruthaigh tionscadal agus téigh go dtí cluaisín na 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 ceann a ghlaoimid public agus is í an eochair read/write an ceann a ghlaoimid secret. Mar shampla, d'fhéadfá iad a chur i gcomhad .env sa bhunfhilléar de do thionscadal.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cód réamhshocraithe an réigiúin (locale). Sa sampla seo, socrófaimid é mar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar do na téacsanna, mar shampla an URL do shuíomh gréasáin. Léigh tuilleadh faoi origins 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;

Déanfaimid TACOTRANSLATE_API_KEY agus TACOTRANSLATE_PROJECT_LOCALE a shainmhíniú go huathoibríoch go luath.

Déantar an cliant a chruthú i gcomhad ar leith ionas go mbeidh sé éasca é a úsáid arís níos déanaí. getLocales níl ann ach feidhm chabhrach le 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'; a léiríonn gur chomhpháirt chliant é seo.

Leis an soláthraí comhthéacs anois réidh le húsáid, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an bunleagan inár bhfeidhmchlár. Tabhair faoi deara go bhfuil fillteán sa chosán 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 na cóid locale go léir a bhfuil tú tar éis a ghníomhachtú don tionscadal a réamh-léiriú.

Anois, déanaimis á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 athtógáil tar éis 60 soicind agus a choinneoidh do aistriúcháin suas chun dáta.

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

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

Chun rindreáil ar an taobh freastalaí a chur ar bun, cruthaigh nó déan athruithe 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 shocruithe. Má tá true, nochtfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó staging (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 treorú agus an atreorú mar is ceart, beidh orainn comhad darb ainm /middleware.ts a chruthú. Ag úsáid Middleware, is féidir linn úsáideoirí a atreorú chuig leathanaigh a thaispeántar 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 na doiciméadúcháin Middleware 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 shocrú. Féach le do thoil ar an cód samplach iomlán le smaointe maidir le conas é seo a dhéanamh!

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

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

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!