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 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 a úsáideann an App Router.
Má tá tú ag úsáid an Pages Router, féach ar an treoir seo in áit sin.

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, tá sé in am chuntas TacoTranslate a chruthú, tionscadal aistriúcháin, agus na eochracha API gaolmhara. 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) de 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 thugaimid public, agus is í an eochair read/write an secret. Mar shampla, is féidir leat 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 scaoilfidh tú riamh an eochair API rúnda read/write ar an taobh cliant i dtimpeallachtaí táirgeachta.

Cuirfimid freisin dhá athróga comhshaoil eile: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe réigiúin cúltaca. Sa sampla seo, socrófaimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar do na téacsanna, mar shampla URL do 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 d’iarratas, beidh ort cliant a chruthú ag úsáid na n-eochracha API a chruthaigh tú 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 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.

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 an pharaiméadair Dynamic Route [locale] chun aistriúcháin don teanga sin a fháil. Ina theannta sin, tá generateStaticParams ag cinntiú go ndéantar réamhléiriú ar na cóid réigiúnacha uile atá gníomhachtaithe don tionscadal.

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 t-athróg revalidate a insíonn do Next.js an leathanach a athtógáil tar éis 60 soicind, agus do chuid aistriúchán a choinneáil cothrom le 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 ionad splanc d'ábhar neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarratais líonra ar an gcliant a sheachaint, toisc go bhfuil na haistriúcháin a theastaíonn dúinn don leathanach ar a bhfuil an t-úsáideoir ag féachaint againn cheana.

Chun rindreáil taobh an fhreastalaí a shocrú, cruthaigh nó módigh /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 na bealaí (routing) agus an atreorú 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 léirítear 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 roghnaithe an úsáideora a shocrú. Féach le do thoil ar an gcód samplach iomlán le haghaidh smaointe faoi conas é seo a dhéanamh!

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

Táimid críochnaithe! Beidh do fheidhmchlár React aistrithe go huathoibríoch anois nuair a chuireann tú aon shreang isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write ar an eochair API acu in ann sreanganna nua a chruthú le haistriú. Molaimid timpeallacht réamhfhorbartha dúnta agus shlándáilte a bheith agat ina bhféadfá do fheidhmchlár táirgthe a thástáil leis an eochair API sin, ag cur sreanganna nua leis sula gcuirtear beo é. Cosnóidh sé seo i gcoinne éinne éinne ó eochair rúnda do API a ghoid, agus d’fhéadfadh sé do thionscadal aistriúcháin a líonadh le sreanganna nua neamhghaolta.

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!