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 feidhmchláir a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla. Ceann de na príomhbhealaí chun é seo a bhaint amach ná idirnáisiúnú (i18n), a cheadaíonn duit do fheidhmchlár a choigeartú do theangacha éagsúla, do airgeadraí agus do fhormáidí dáta.

Sa alt seo, beimid ag iniúchadh conas idirnáisiúnú a chur le d’iarratas React Next.js, le rannchóiriú ar thaobh an fhreastalaí. TL;DR: Féach 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 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, beimid ag úsáid TacoTranslate.

Aistríonn TacoTranslate do shreanganna go huathoibríoch chuig aon teanga ag úsáid AI ceannródaíoch, agus cuireann sé deireadh le bainistiú leadránach comhad JSON.

Suiteáilimis é ag baint úsáide as npm i do chríochfort:

npm install tacotranslate

Céim 2: Cruthaigh cuntas saor in aisce ar TacoTranslate

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

Laistigh de UI an aip TacoTranslate, cruthaigh tionscadal agus téigh chuig cluaisín na n-eochair 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 dtugaimid public uirthi, agus is í an eochair read/write an ceann a dtugaimid secret uirthi. Mar shampla, d’fhéadfá iad a chur sa chomhad .env atá i bhfhréamh do thionscadail.

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áirgeachta ar thaobh an chliaint.

Cuirfimid beirt athróga timpeallachta eile leis freisin: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réigiún teanga réamhshocraithe a úsáidfear mar rogha cúltaca. Sa sampla seo, socróimid é chuig en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stórfar do na téacsanna, mar shampla URL do shuíomh gréasáin. Léigh tuilleadh faoi fhoinsí anseo.

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

Céim 3: TacoTranslate a chur ar bun

Chun TacoTranslate a chomhtháthú le d’iarratas, beidh ort cliant a chruthú ag úsáid na n-eochracha API a luadh cheana. 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 shainiú go huathoibríoch go luath.

Tá sé éasca an cliant a úsáid arís níos déanaí má chruthaítear é i gcomhad ar leith. Níl getLocales ach feidhm chabhrach le láimhseáil earráide ionsuite. Anois cruthaigh comhad darb ainm /app/[locale]/tacotranslate.tsx, áit a gcuirfimid 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 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 amach fréimhe inár bhfeidhmchlár. Tabhair faoi deara go bhfuil fillteán sa chosán seo ag baint úsáide as Dynamic Routes, áit a bhfuil [locale] 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 bhfuil na cóid áitiúla go léir a bhfuil curtha i ngníomh agat don tionscadal réamhluchtaithe.

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 i ndiaidh 60 soicind agus do chuid aistriúchán a choinneáil cothrom le dáta.

Step 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 a fheiceáil ar dtús. Ina theannta sin, is féidir linn fiosrúcháin líonra ón gcliant a sheachaint, toisc go bhfuil na haistriúcháin a theastaíonn dúinn don leathanach a bhfuil an t-úsáideoir á féachaint cheana féin againn.

Chun rindreáil taobh an fhreastalaí a shocrú, cruthaigh nó modhnigh /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 ionas go n-oireann sí do do shocruithe. Má tá true, léireoidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stagála (isProduction is false), bainfimid úsáid as 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 routáil agus athstíriú mar is ceart, beidh orainn comhad darb ainm /middleware.ts a chruthú. Ag baint úsáide as Middleware, is féidir linn úsáideoirí a atreorú chuig leathanaigh a thaispeántar 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úcháin Next.js Middleware.

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 chun smaointe a fháil ar conas é seo a dhéanamh!

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

Táimid críochnaithe! Beidh do fheidhmchlár React á aistriú go huathoibríoch anois nuair a chuireann tú aon shreanganna isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write ar an eochair API in ann sreanganna nua a chruthú le haistriú. Molaimid timpeallacht staidála dhún agus shlándáilte a bheith agat, áit ar féidir leat do fheidhmchlár táirgeachta a thástáil le eochair API den sórt sin agus sreanganna nua a chur leis sula gcuirfear beo é. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus seachnóidh sé go bhfásfaidh do thionscadal aistriúcháin go neamhriachtanach trí shreanganna nua, neamhbhaintmhara 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!