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 aipeanna a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí riachtanacha le seo a bhaint amach ná trí idirnáisiúnú (i18n), a ligeann duit d’fheidhmchlár a oiriúnú do theangacha, do churais airgeadais, agus do fhormáidí dáta éagsúla.

Sna hailt seo, cuirfimid faoi bhráid conas idirnáisiúnú a chur le d’fheidhmchlár React Next.js, le léiriú taobh an fhreastalaí. TL;DR: Féach ar an sampla iomlán anseo.

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

Céim 1: Suiteáil leabharlann i18n

Chun idirnáisiúntacht a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlann coitianta ann, lena n-áirítear next-intl. Sa sampla seo, áfach, beimid ag úsáid TacoTranslate.

Déantar TacoTranslate aistriúcháin do do shreanga go huathoibríoch go aon teanga ar bith ag úsáid AI ceannródaíoch, agus scaoileann sé saor thú ó bhainistíocht leadránach comhad JSON.

Déan é a shuiteáil ag úsáid 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 gaolmhara. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl ort cárta creidmheasa a chur leis.

Laistigh de UI an fheidhmchláir TacoTranslate, cruthaigh tionscadal, agus nascaigh chuig cluaisín eochracha API. Cruthaigh eochrach amháin read, agus eochrach amháin read/write. Sábhálfaimid iad mar athróga timpeallachta. Is é an eochrach read an ceann a ghlaoimid public air agus is é an eochrach read/write an secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i mbonn do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Bí cinnte gan eochair rúnda read/write API a nochtadh riamh do thimpeallachtaí táirgeachta taobh an chliaint.

Cuirfimid dhá athróg chomhshaoil ​​breise freisin: TACOTRANSLATE_DEFAULT_LOCALE agus TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe don teanga cealaithe. Sa sampla seo, socróimid é go en don Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” ina bhfuil do shreanga stóráilte, mar shampla URL do shuíomh gréasáin. Léigh tuilleadh faoinár mbunús 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 baint úsáide as na heochracha API ón am atá thart. 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.

Ag cruthú an chliaint i gcomhad ar leithligh déanann sé é a úsáid go héasca arís níos déanaí. Is feidhm chabhrach í getLocales le roinnt láimhseáil earráide ionsuite. Anois, cruthaigh comhad darb ainm /app/[locale]/tacotranslate.tsx, ansin cuirfimid 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ú gur comhpháirtí cliant é seo.

Leis an soláthraí comhthéacs ullmhaithe anois, cruthaigh comhad darb ainm /app/[locale]/layout.tsx, an leagan fréimhe 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>
	);
}

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 gach cód áitiúil atá gníomhachtaithe agat don tionscadal pre-réamhshocraithe.

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 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 léiriú 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 ionad splanc de ábhar nach bhfuil aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra a sheachaint ar an gcliant, toisc go bhfuil na haistriúcháin a theastaíonn ón leathanach atá ar taispeáint againn cheana féin.

Chun rindreáil taobh an fhreastalaí a shocrú, 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};
};

Modhnigh an seiceáil isProduction chun oiriúnú do do shocruithe féin. Má tá true, taispeánfaidh TacoTranslate eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó réamh-mhúnlaíochta (isProduction is false), úsáidfimid an eochair API rúnda read/write chun a chinntiú go ndéantar sreanga nua a sheoladh le haistriúchán.

Chun a chinntiú go n-oibríonn bealaí agus athstíriú mar is ceart, beidh orainn comhad darb ainm /middleware.ts a chruthú. Ag úsáid Middleware, is féidir linn úsáideoirí a athstíriú 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 go socraíonn tú an matcher de réir doiciméadú Middleware Next.js.

Ar an gcustaiméir, is féidir leat an locale cookie a athrú chun teanga tosaigh an úsáideora a athrú. Féach le do thoil ar an cód samplach iomlán le haghaidh smaointe ar conas é seo a dhéanamh!

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

Tá muid críochnaithe! Beidh do fheidhmchlár React aistrithe go huathoibríoch anois nuair a chuireann tú aon shreanga isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write ar eochair API in ann sreanga nua a chruthú le haistriú. Molaimid timpeallacht stáitse dúnta agus shábháilte a bheith agat, áit ar féidir leat do fheidhmchlár táirgeachta a thástáil le eochair API mar sin, ag cur sreanganna nua leis sula bhfágann tú beo. Cosnóidh sé seo aon duine ó goid do eochair API rúnda, agus b’fhéidir go gcuirfeadh sé an tionscadal aistriúcháin i léig trí shreanga nua, neamhlíomhraithe 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!