Yadda ake aiwatar da tsarin fassara na ƙasa-ƙasa (internationalization) a cikin aikace-aikacen Next.js da ke amfani da App Router

Yayinda duniya ke ƙara samun haɗin kai, yana da muhimmanci ga masu haɓaka yanar gizo su samar da aikace-aikace da za su iya biyan bukatun masu amfani daga kasashe da al'adu daban-daban. Daya daga cikin manyan hanyoyin cimma wannan 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 ake ƙara internationalization zuwa aikace-aikacen React Next.js ɗinku, tare da nunin daga ɓangaren uwar garke (server-side rendering). TL;DR: Duba cikakken misali anan.

Wannan jagora ne 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 internationalization a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai wasu shahararrun ɗakunan karatu da dama, ciki har da next-intl. A cikin wannan misalin, duk da haka, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutunku 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 girka module ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate, aikin fassara, da makullin API masu alaƙa. Yi rijista anan. Kyauta ne, kuma ba ya buƙatar ku saka katin kuɗi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aiki, sannan ka je shafin makullin API ɗinsa. Ƙirƙiri maballi guda ɗaya na read da maballi guda ɗaya na read/write. Za mu adana su a matsayin saitunan muhalli. Maballin read shi ne abin da muke kira public, kuma maballin read/write shi ne secret. Misali, za ka iya ƙara su cikin fayil .env a tushen aikinka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ku taɓa fallasa mabudin API mai sirri read/write ga muhalli na samarwa a ɓangaren abokin ciniki.

Za mu kuma ƙara wasu ƙarin canje-canje na muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yanki (locale) da za a koma ta tsoho. A cikin wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: The "folder" where your strings will be stored, such as the URL of your website. Karanta ƙarin bayani game da origins anan.

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

Mataki na 3: Saita TacoTranslate

Don haɗa TacoTranslate cikin aikace-aikacenku, za ku buƙaci ƙirƙirar client ta amfani da maɓallan API da aka ambata a baya. Alal 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 ayyana TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE ta atomatik nan ba da jimawa ba.

Ƙirƙirar client a cikin fayil daban yana sauƙaƙa sake amfani da shi daga baya. getLocales wani aikin taimako ne kawai wanda ke ɗauke da tsarin sarrafa kuskure da aka gina a ciki. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu aiwatar da mai samar 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 komponent ɗin abokin ciniki ne.

Yanzu da mai ba da mahallin ya shirya, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, wanda shi ne tushen tsarin shafi a cikin aikace-aikacenmu. Lura cewa wannan hanya tana da babban fayil wanda ke amfani da Dynamic Routes, inda [locale] shine sigar 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 Dynamic Route ɗinmu, maɓallin [locale], don ɗauko fassarar wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa an riga an gina duk lambobin yare da ka kunna a cikin aikin ka.

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 revalidate canjin da ke gaya wa Next.js ya sake gina shafin bayan sakan 60, kuma ya ci gaba da sabunta fassarar ku.

Mataki na 4: Aiwatar da nunin shafi a gefen uwar garke

TacoTranslate yana tallafawa nunin ɓangaren uwar garke. Wannan yana matuƙar inganta kwarewar mai amfani ta hanyar nuna abun da aka fassara nan take, maimakon gajeriyar bayyana abun da ba a fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a bangaren abokin ciniki, saboda tuni muna da fassarorin da muke buƙata don shafin da mai amfani ke kallo.

Don saita nuni daga gefen uwar garke, ƙirƙiri 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 ya dace da saitinka. Idan true, TacoTranslate zai bayyana mabuɗin API na jama'a. Idan muna cikin muhalli na gida, gwaji, ko na staging (isProduction is false), za mu yi amfani da sirrin mabuɗin API read/write don tabbatar da cewa an tura sabbin rubutu don fassara.

Don tabbatar da cewa routing da redirection suna aiki kamar yadda ake tsammani, za mu buƙaci ƙirƙirar fayil mai suna /middleware.ts. Ta amfani da Middleware, za mu iya mayar da masu amfani zuwa shafuka da ake nuna musu 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 ka saita matcher bisa ga takardun bayanai na Next.js Middleware.

A ɓangaren abokin ciniki, za ku iya canza kukin locale don sauya yaren da mai amfani ya fi so. Don Allah duba cikakken misalin lambar don samun ra'ayoyi kan yadda za a yi wannan!

Mataki na 5: Tura kuma gwada!

Mun gama! Aikace-aikacen React ɗinku yanzu za a fassara ta atomatik lokacin da kuka ƙara duk wani rubutu zuwa Translate component. Lura cewa kawai muhallin da ke da izinin read/write a kan mabuɗin API zai iya ƙirƙirar sabbin rubutu da za a fassara. Muna ba da shawarar ku tanadi muhalli na gwaji (staging) mai rufe kuma mai tsaro, inda za ku iya gwada aikace-aikacen samarwa tare da irin wannan mabuɗin API, kuna ƙara sabbin rubutu kafin ku tafi kan layi. Wannan zai hana kowa sata mabuɗin API ɗinku na sirri, kuma zai hana yiwuwar cunkoson aikin fassarar ku 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!