Conas idirnáisiúnú a chur i bhfeidhm i aip 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 fhorbairt a fhreastalaíonn ar úsáideoirí ó thíortha agus ó chultúir éagsúla.

Sa alt seo, scrúdóimid conas idirnáisiúnú a chur le do fheidhmchlár React Next.js, le rindreáil 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 d'iarratas 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.

TacoTranslate aistríonn do théacsanna go huathoibríoch chuig aon teanga ag úsáid AI ceannródaíoch, agus saorann sé thú ón mbainistíocht leadránach ar chomhaid JSON.

Déanaimis é a shuiteáil ag úsáid npm i do theirminéal:

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 do chuntas TacoTranslate, tionscadal aistriúcháin agus na eochracha API comhfhreagracha a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní gá duit cárta creidmheasa a chur leis.

Sa UI den aip TacoTranslate, cruthaigh tionscadal agus téigh chuig 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 ghlaoimid public, agus is í an eochair read/write an secret. Mar shampla, d’fhéadfá iad a chur sa chomhad .env ag bun do thionscadail.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe don theanga cúltaca. Sa sampla seo, socrófaimid é mar 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 níos mó faoin áit bhunaidh 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 tugadh 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;

Sainmhíneofar 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í. Is feidhm chabhrach amháin í getLocales le roinnt láimhseáil earráide ionsuite. Anoıs, cruthaigh comhad darb ainm /app/[locale]/tacotranslate.tsx, áit a gcurfaimid 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 amach fréimhe inár n-iarratas. Tabhair faoi deara go bhfuil fillteán sa chonair seo ag baint úsáide as Dynamic Routes, áit a bhfuil [locale] ina pharaimé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 cinntiú go ndéantar réamhléiriú ar gach cód áitiúil atá gníomhachtaithe i 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 insíonn do Next.js an leathanach a thógáil arís tar éis 60 soicind, agus do chuid aistriúchán a choinneáil suas chun dáta.

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

Tacaíonn TacoTranslate le rindreáil ar thaobh an fhreastalaí. Cuireann sé seo feabhas mór ar thaithí an úsáideora trí ábhar aistrithe a thaispeáint láithreach, seachas splanc d'ábhar nach bhfuil 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 atá an t-úsáideoir ag féachaint air cheana féin.

Chun rindreáil ar thaobh an fhreastalaí a shocrú, cruthaigh nó módhnigh /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};
};

Cuir an seiceáil isProduction in oiriúint do do shocruithe. Má tá true, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stáideála (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 rialú bealaí 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 leathanacha 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 Middleware Next.js.

Ar an gcliant, is féidir leat an fianán locale a athrú chun an teanga is fearr ag an úsáideoir 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: Seol agus tástáil!

Táimid críochnaithe! Beidh do fheidhmchlár React aistrithe go huathoibríoch anois nuair a chuirfidh tú aon théacsanna isteach i gcomhpháirt Translate. Tabhair faoi deara nach mbeidh ach timpeallachtaí leis na ceadanna read/write ar an eochair API in ann téacsanna nua a chruthú le haistriú. Molaimid timpeallacht réamhtástála dhún agus shlándáilte a bheith agat ina féidir leat do fheidhmchlár táirgeachta a thástáil le heochair API den sórt sin, ag cur téacsanna nua leis sular téann sé beo. Cuideoidh sé seo le cosc a chur ar dhuine ar bith do eochair API rúnda a ghoid, agus féadfaidh sé do thionscadal aistriúcháin a fhás ró-mhór trí théacsanna nua, neamhghaolmhar 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!