Yadda za a aiwatar da fassarar harsuna a cikin aikace-aikacen Next.js da ke amfani da Pages Router

Yayinda duniya ke ƙara zama mai haɗa kan kasashe, yana ƙara zama muhimmanci 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 manyan hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenku zuwa harsuna daban-daban, nau'ikan kuɗi, da tsarin kwanaki.

A cikin wannan darasin, za mu bincika yadda za a ƙara internationalization a cikin 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 don aikace-aikacen Next.js waɗanda ke amfani da Pages Router.
Idan kuna amfani da App Router, da fatan za ku duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da maktabar i18n

Don aiwatar da fassarar ƙasa da ƙasa (internationalization) a cikin aikace‑aikacen Next.js ɗinka, za mu fara da zaɓar ɗakin karatu na i18n. Akwai wasu shahararrun ɗakunan karatu, ciki har da next-intl. Duk da haka, a wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubuce‑rubucenka ta atomatik zuwa kowace harshe ta amfani da sabuwar fasahar AI, kuma yana kawar da wahalar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kun girka wannan module, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate ɗinku, aikin fassara, da makullin API da suka dace. Ƙirƙiri asusu anan. Yana da kyauta, kuma ba ya buƙatar ku saka katin kuɗi.

A cikin UI ɗin aikace‑aikacen TacoTranslate, ƙirƙiri aikin, sannan ka 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 shi ne abin da muke kira public, kuma maɓallin read/write shi ne secret. Misali, za ka iya ƙara su cikin fayil .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ku taɓa fallasa sirrin read/write maɓallin API zuwa mahallin samarwa na ɓangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar harshe da ake amfani da ita a matsayin tsohuwar madadin idan babu fassara. A cikin wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folda” inda za a adana rubutunku, misali URL ɗin 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 maɓallan 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Za mu ayyana TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar client a cikin wani fayil daban yana sa ya fi sauƙin amfani da shi daga baya. Yanzu, ta amfani da keɓaɓɓen /pages/_app.tsx, za mu ƙara mai ba da sabis na TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Idan kuna da na musamman pageProps da _app.tsx, don Allah faɗaɗa ma'anar tare da siffofi da lambar da ke sama.

Mataki na 4: Aiwatar da nunin a ɓangaren uwar-garke

TacoTranslate yana ba da damar gudanar da fassarorinku a ɓangaren uwar garke. Wannan yana ƙwarai inganta ƙwarewar mai amfani ta hanyar nuna abin da aka fassara nan take, maimakon ganin gajeren nunin abin da bai fassaru ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa daga ɓangaren abokin ciniki, saboda mun riga mun sami duk fassarorin da muke buƙata.

Za mu fara ta hanyar ƙirƙira ko gyara /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Gyara duba isProduction don ya dace da saitinka. Idan true, TacoTranslate zai bayyana maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko na gwajin mataki (isProduction is false), za mu yi amfani da sirrin read/write maɓallin API don tabbatar cewa an aika sabbin rubutu don fassara.

Har zuwa yanzu, mun saita aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake tallafawa. Abu na gaba da za mu yi shi ne mu samo fassarori don duk shafukanku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps gwargwadon bukatunku.

Waɗannan ayyukan suna karɓar hujjoji uku: ɗaya Next.js Static Props Context abu, saitin TacoTranslate, da siffofin Next.js na zaɓi. Ka lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassararku za ta kasance mai sabuntawa.

Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, bari mu ɗauka kuna da fayil ɗin shafi kamar /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Ya kamata yanzu ku iya amfani da Translate sashi don fassara rubutun a cikin duk sassan React ɗinku.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Mataki na 5: Tura kuma gwada!

Mun gama! Aikace‑aikacen React ɗinku yanzu za a fassara shi ta atomatik duk lokacin da kuka ƙara kowace kirtani zuwa Translate sashi. Lura cewa sai yanayi da ke da izinin read/write a kan mabuɗin API za su iya ƙirƙirar sababbin kirtani da za a fassara. Muna ba da shawarar ku sami wurin gwaji na staging da aka rufe kuma mai tsaro inda za ku iya gwada aikace‑aikacen samarwa ɗinku tare da irin wannan mabuɗin API, kuna ƙara sababbin kirtani kafin a tura zuwa samarwa. Wannan zai hana kowa daga satar sirrin mabuɗin API ɗinku, kuma zai hana yiwuwar cunkoson aikin fassarar ku ta hanyar ƙara sababbin kirtani marasa alaƙa.

Tabbatar ku duba cikakken misali a shafin GitHub ɗinmu. A can, za ku kuma sami misali na yadda ake yin wannan ta amfani da App Router! Idan kun gamu da wata matsala, kada ku yi shakka ku tuntube mu, kuma za mu yi matukar farin cikin taimaka muku.

TacoTranslate yana ba da damar fassara da daidaita aikace-aikacen React ɗinku ta atomatik cikin sauri zuwa da daga fiye da harsuna 75. Fara yau!