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 iarratais a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí móra chun é seo a bhaint amach ná trí idirnáisiúnú (i18n), a ligeann duit do chuid iarratais a oiriúnú do theangacha, do chuid airgeadraí, agus do fhormáidí dáta éagsúla.

TL;DR: Féach an sampla iomlán anseo.

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

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúnta a chur i bhfeidhm i d’iarratas Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlann cháiliúla ann, lena n-áirítear next-intl. Sa sampla seo, áfach, úsáidfimid TacoTranslate.

Déantar do shreangacha a aistriú go huathoibríoch chuig aon teanga ag TacoTranslate ag úsáid AI chun cinn, agus scaoileann sé tú ó láimhseáil tuirseach na gcomhad JSON.

Déanaimis é a shuiteáil ag baint úsáide as npm i do chríochfort:

npm install tacotranslate

Céim 2: Cruthaigh cuntas saor in aisce 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 bainteach. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur leis.

Laistigh de UI an fheidhmchláir TacoTranslate, cruthaigh tionscadal, agus téigh go dtí an cluaisí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 thugaimid public air agus is é an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur i gcomhad .env i mbonn do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe dúchais chun pobalbhreith a chur i bhfeidhm. Sa sampla seo, socróimid é ar en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina stóráilfear do shreanga, mar shampla, URL do shuíomh gréasáin. Léigh níos mó 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 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;

Beidh muid ag sainmhíniú 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í. getLocales níl ann ach feidhm chabhrach, agus tá beagán láimhseála earráide tógtha inti. 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 go bhfuil sé seo ina chomhpháirt chliaint.

Leis an soláthraí comhthéacs réidh anois le dul, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an leagan fréamhshlua inár n-iarratas. Tabhair faoi deara go bhfuil fillteán ag an mbealach seo ag úsáid 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. Thairis sin, tá generateStaticParams ag cinntiú go ndéantar réamh-léiriú ar gach cód logánúcháin atá gníomhachtaithe agat do do thionscadal.

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 cothrom leis an am.

Céim 4: Ag cur i bhfeidhm rindreáil taobh an fhreastalaí

Tacaíonn TacoTranslate le léiriú taobh an tseirfíse. Feabhsaíonn sé seo an taithí úsáideora go mór trí chur i láthair díreach ar an ábhar aistrithe, in ionad tonn gasta d’ábhar neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra a sheachaint ar an gcustaiméir, mar tá na haistriúcháin a theastaíonn dúinn don leathanach a bhfuil an t-úsáideoir ag féachaint air againn cheana féin.

Chun rindreáil taobh an fhreastalaí a shocrú, cruthaigh nó modhnú /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 freastal ar do shocrú. Má tá true, déanfaidh TacoTranslate léiriú ar eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó ardáin (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar sreangacha nua le haistriúchán.

Chun a chinntiú go n-oibríonn beartú agus athrithint 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 i dteanga a bhfuil siad ag roghnú.

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ú Middlewair Next.js.

Ar an gcliant, is féidir leat an fianán locale a athrú chun 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: Déan foilsithe agus tástáil!

Táimid críochnaithe! Beidh do iarratas React aistrithe go huathoibríoch anois nuair a chuireann tú aon shreanga leis an Translate Comhpháirt. Tabhair faoi deara nach mbeidh ann ach timpeallachtaí le ceadanna read/write ar an eochair API a bheith in ann sreanga nua a chruthú le haistriú. Molaimid timpeallacht stáisiúin dúnta agus dhaingnithe a bheith agat áit ar féidir leat do iarratas táirgeachta a thástáil le h-eochair API den sórt sin, ag cur sreangacha nua leis sula bhfágann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus ar cheart do thionscadal aistriúcháin a mhéadú trí shreangacha nua, neamhtheoranta 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!