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 iarratais a thógáil a d'fhéadfadh freastal ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na príomhbhealaí chun é seo a bhaint amach ná trí idirnáisiúntacht (i18n), a ligeann duit do chlár a chur in oiriúint do theangacha éagsúla, airgeadraí, agus formáidí dáta.

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

Tá an treoir seo dírithe ar aipeanna Next.js atá ag úsáid an App Router.
Má tá tú ag úsáid an Pages Router, féach an treoir seo in ionad sin.

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 leabharlanna coitianta ann, lena n-áirítear next-intl. Sa sampla seo áfach, beimid ag úsáid TacoTranslate.

Déantar do shreangáin a aistriú go huathoibríoch chuig aon teanga ag TacoTranslate ag baint úsáide as AI nua-aimseartha, agus scaoileann sé saor tú ó bhainistíocht leadránach comhad JSON.

Lig dúinn é a shuiteáil ag baint úsáide as npm i do chonsól:

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. Cuir cuntas ar bun anseo. Tá sé saor in aisce, agus ní éilíonn sé orm cárta creidmheasa a chur leis.

Laistigh den UI aip TacoTranslate, cruthaigh tionscadal, agus déan nascleanúint chuig cluaisí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 uirthi agus is é an eochair read/write an ceann a thugaimid secret. Mar shampla, d’fhéadfá iad a chur le comhad .env i fréamh an tionscadail.

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áirgthe taobh an chliaint.

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

• TACOTRANSLATE_DEFAULT_LOCALE: An cód réamhshocraithe do theilgean chúltaca. Sa sampla seo, socróimid é go en do Bhéarla.
• TACOTRANSLATE_ORIGIN: An “fillteán” áit a stórfar 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 d’iarratas, beidh ort cliant a chruthú ag úsáid na n-eochracha API ónár 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.

Ag cruthú an chliaint i gcomhad ar leithligh éascaíonn sé é a úsáid 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, áit a chuirfimid an t-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ú go bhfuil sé seo ina chomhpháirt cliant.

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 cinntiú go bhfuil gach cód logánta a ghníomhachtaigh tú don tionscadal réamhluchtaáilte.

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 le dáta.

Céim 4: Ag cur i bhfeidhm léiriú taobh an fhreastalaí

Tacaíonn TacoTranslate le tuairisciú taobh an fhreastalaí. Feabhsaíonn sé seo an taithí úsáideora go mór trí shonraí aistrithe a thaispeáint láithreach, seachas splanc de shonraí neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra a scipeáil ar an gcliant, toisc go bhfuil na haistriúcháin atá de dhíth againn don leathanach atá an t-úsáideoir ag féachaint orthu againn cheana féin.

Chun leaganá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};
};

Mionathraigh an seiceáil isProduction chun oiriúnú do do shocraithe. Má tá true ann, taispeánfaidh TacoTranslate eochair API poiblí. Má táimid i dtimpeallacht áitiúil, tástála, nó stádála (isProduction is false), úsáidfimid an eochair rúnda read/write API chun a chinntiú go seoltar sreanga nua le haistriúchán.

Chun a chinntiú go n-oibríonn an bealach agus an athbheochan de réir mar a bheifí ag súil leis, beidh gá againn comhad darb ainm /middleware.ts a chruthú. Ag baint úsáide as Middleware, is féidir linn úsáideoirí a threorú 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 chur ar bun de réir Doicimíocht Idirmheánach Next.js.

Ar an gcliant, is féidir leat an locale cookie a athrú chun an 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 dáilte agus tástáil!

Táimid críochnaithe! Beidh d’iarratas React á aistriú go huathoibríoch anois nuair a chuirfidh tú aon shreanga leis an Translate comhéadan. Tabhair faoi deara go mbeidh cumaíocht ag ach timpeallachtaí le ceadanna read/write ar an eochair API chun sreanga nua a chruthú le haistriú. Molaimid timpeallacht seasta agus slánchiallach a bheith agat inar féidir leat d’iarratas táirgeachta a thástáil le heochair API mar sin, ag cur sreanga nua leis sula mbaintear beo é. Cuirfidh sé seo cosc ar dhuine ar bith do eochair rúnda API a ghoid, agus go bhféadfadh sé do thionscadal aistriúcháin a mhéadú go mícheart trí shreanga nua, neamhligthe a chur leis.

Bí cinnte seiceáil amach an sampla iomlán ar ár bpróifíl GitHub. Ansin, gheobhaidh tú sampla freisin de conas é seo a dhéanamh ag úsáid an Pages Router ! Má bhíonn aon fhadhbanna agat, ná bíodh aon leisce ort teagmháil a dhéanamh, agus beidh lúcháir orainn cabhrú leat.

Ligíonn TacoTranslate duit do iarratais React a áitiú go huathoibríoch go tapa chuig agus ón aon teanga ar bith. Tosaigh inniu!