Yadda ake aiwatar da fassara zuwa harsuna daban-daban (internationalization) a cikin aikace-aikacen Next.js da ke amfani da App Router

Yayinda duniya ke ƙara haɗa kai, ya zama wajibi ga masu haɓaka yanar gizo su gina aikace-aikace da za su iya biyan bukatun masu amfani daga ƙasashe da al'adu daban-daban. Daya daga cikin muhimman hanyoyin cimma hakan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, nau'ikan kuɗi, da tsarin kwanan wata.

A cikin wannan labarin, za mu bincika yadda za a ƙara internationalization a cikin aikace-aikacen React Next.js ɗinka, tare da nunawa a ɓangaren uwar garken (server-side rendering). TL;DR: Ga cikakken misali a nan.

Wannan jagorar ce ga aikace-aikacen Next.js da ke amfani da App Router.
Idan kuna amfani da Pages Router, duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da fassarar harsuna (i18n) a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatun i18n. Akwai wasu ɗakunan karatu da suka shahara, ciki har da next-intl. A cikin wannan misalin, duk da haka, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutun ku ta atomatik zuwa kowace harshe ta amfani da fasahar AI ta zamani, kuma yana 'yantar da ku daga aikin gajiya na sarrafa fayilolin JSON.

Bari mu girka shi ta amfani da npm a cikin terminal ɗinku:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kun shigar da module ɗin, lokaci yayi da ku ƙirƙiri asusun TacoTranslate, aikin fassara, da maɓallan API da suka dace. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ƙara katin kuɗi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aiki, sannan ku je shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli ɗaya read da maɓalli ɗaya read/write. Za mu ajiye su a matsayin canje-canjen muhalli. Maɓallin read shine abin da muke kira public, kuma maɓallin read/write shine secret. Misali, za ku iya ƙara su cikin fayil .env a tushen aikin ku.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ku taɓa fallasa sirrin mabuɗin API read/write ga yanayin samarwa na gefen abokin ciniki.

Za mu kuma ƙara ƙarin maɓallan muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar locale ta tsoho da ake amfani da ita a matsayin madadin; a wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folder” inda za a adana rubutun ku, misali URL na gidan yanar gizonku. Karanta ƙarin bayani game da asali anan.

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

Mataki na 3: Saitawa TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar wani client ta amfani da mabuɗan API da aka ambata a baya. Misali, ƙirƙiri fayil mai suna /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;

Za mu bayyana TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa sake amfani da shi daga baya. getLocales kawai aikin taimako ne tare da wasu hanyoyin sarrafa kuskure na ciki. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu aiwatar da mai samar da TacoTranslate.

'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>
	);
}

Lura da 'use client'; wanda ke nuna cewa wannan sashin abokin ciniki ne.

Yanzu da mai ba da mahallin ya shirya, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, wanda shi ne babban tsarin shafi a cikin aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil da ke amfani da Dynamic Routes, inda [locale] shi ne siffar mai canzawa.

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>
	);
}

Abu na farko da za a lura anan shi ne muna amfani da ma'aunin mu Dynamic Route [locale] don ɗauko fassarorin wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa duk lambobin yankin yare da kuka kunna a aikin ku an riga an gina su.

Yanzu, bari mu gina shafinmu na farko! Ƙirƙiri fayil mai suna /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!" />
	);
}

Lura da canjin revalidate wanda ke gaya wa Next.js ya sake gina shafin bayan sakan 60, kuma ya ci gaba da sabunta fassarorin ku.

Mataki na 4: Aiwatar da nunin a gefen uwar garke

TacoTranslate yana tallafawa server-side rendering. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun da aka fassara nan take, maimakon gajeren nunin abun da ba a fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a bangaren abokin ciniki, saboda tuni muna da fassarorin da muke buƙata don shafin da mai amfani ke kallo.

Don saita nunin bangaren uwar garke, kirkiro ko gyara /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};
};

Gyara duba isProduction don dacewa da saitin ku. Idan true, TacoTranslate zai bayyana mabuɗin API na jama'a. Idan muna cikin muhalli na gida, gwaji, ko staging (isProduction is false), za mu yi amfani da mabuɗin API na sirri read/write don tabbatar da an aika sababbin rubutu don fassara.

Don tabbatar da cewa kewayawa da sake nuni suna aiki yadda ake tsammani, za mu buƙaci ƙirƙirar fayil mai suna /middleware.ts. Ta amfani da Middleware, za mu iya tura masu amfani zuwa shafukan da aka gabatar a cikin yaren da suka fi so.

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);
}

Tabbatar an saita matcher bisa ga takardun Next.js Middleware.

A bangaren abokin ciniki, za ku iya canza kuki locale don canza yaren da mai amfani ya fi so. Da fatan za ku duba cikakken misalin lambar don samun ra'ayoyi kan yadda ake yin haka!

Mataki na 5: Tura shi zuwa aiki kuma gwada!

Mun gama! Aikace-aikacen React ɗinka za a fassara ta atomatik yanzu lokacin da ka ƙara duk wani rubutu zuwa Translate bangare. Lura cewa kawai muhalli da ke da izinin read/write a kan mabuɗin API ne za su iya ƙirƙirar sabbin rubutu don a fassara. Muna ba da shawarar ka sami muhalli na gwaji mai rufe da tsaro inda za ka iya gwada aikace-aikacen samarwa ɗinka tare da irin wannan mabuɗin API, ƙara sabbin rubutu kafin a tura zuwa raye. Wannan zai hana kowa satar sirrin mabuɗin API ɗinka, kuma zai rage yiwuwar cunkoshe aikin fassarar ka ta hanyar ƙara sabbin rubutu marasa alaƙa.

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!