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

Yayinda duniya ke kara zama ta duniya daya, yana da 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. Ɗaya daga cikin manyan hanyoyin cimma wannan shi ne ta hanyar ƙasa da ƙasa (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna, kudade, da kuma tsarin kwanaki daban-daban.

A cikin wannan koyarwar, za mu bincika yadda ake ƙara ƙasa da ƙasa zuwa aikace-aikacen React Next.js naka, tare da rendering a bangaren uwar garke. TL;DR: Duba cikakken misalin a nan.

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

Mataki na 1: Shigar da laburaren i18n

Don aiwatar da haɗin harsuna (internationalization) a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗimbin ɗakunan karatu masu shahara, ciki har da next-intl. Koyaya, a wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutunku ta atomatik zuwa kowace harshe ta amfani da AI mai ci gaba, kuma yana 'yantar da ku daga wahalar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kuka girka wannan module ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate, aikin fassara, da maɓallan API masu alaƙa. Ƙirƙiri asusu 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 maɓallan API na aikin. Ƙirƙiri ɗaya read maɓalli, da ɗaya read/write maɓalli. Za mu adana su a matsayin canje‑canjen muhalli (environment variables). Maɓallin read shine abin da muke kira public, kuma maɓallin read/write shine secret. Misali, za ka iya ƙara su a cikin fayil ɗin .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ku taɓa fallasa sirrin read/write API key ga yanayin samarwa a ɓangaren abokin ciniki.

Za mu kuma ƙara wasu masu canji na muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren madadin (fallback) ta tsoho. A wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folder” wuri ne inda za a adana rubutunku, misali URL na shafin yanar gizonku. Karanta ƙarin bayani game da asali a nan.

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

Mataki na 3: Saita TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar abokin ciniki 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 a ayyana TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar client a cikin fayil ɗin daban yana sauƙaƙa sake amfani da shi daga baya. Yanzu, ta amfani da wani na musamman /pages/_app.tsx, za mu ƙara mai ba da 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 kun riga kuna da keɓaɓɓun pageProps da _app.tsx, da fatan za a faɗaɗa ma'anar tare da siffofi da lambar da ke sama.

Mataki na 4: Aiwana fassarar ɓangaren uwar garke

TacoTranslate yana ba da damar nuna fassarar ku daga gefen uwar-gida. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abin da aka fassara nan take, maimakon fara da gajeren bayyana abin da ba a fassara ba. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a ɓangaren abokin ciniki, saboda tuni muna da duk fassarorin da muke buƙata.

Za mu fara da ƙ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 dacewa da saitinka. Idan true, TacoTranslate zai nuna maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko gwaji na mataki (isProduction is false), za mu yi amfani da maɓallin API na sirri read/write don tabbatar da cewa ana aika sababbin kalmomi 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 samo fassarori don duk shafukanku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatunku.

Waɗannan ayyuka suna karɓar hujjoji guda uku: ɗaya Next.js Static Props Context abu, saitin don TacoTranslate, da zaɓaɓɓun halayen Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassarorinku su kasance na zamani.

Don amfani da ɗaya daga cikin waɗannan ayyukan a cikin shafi, 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 kirtani a cikin dukkan sassan React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Sanya a aiki kuma gwada!

Mun gama! Aikace-aikacen React ɗinku yanzu za a fassara ta atomatik idan kun ƙara kowane string a cikin Translate component. Lura cewa kawai muhalli (environments) da ke da izinin read/write a kan API key za su iya ƙirƙirar sabbin strings da za a fassara. Muna ba da shawarar ku sami wani rufe kuma mai tsaro muhalli na staging inda za ku iya gwada aikace-aikacen ku na production tare da irin wannan API key, ku ƙara sabbin strings kafin ya shiga aiki. Wannan zai hana duk wanda zai sace sirrin API key ɗinku, kuma zai iya sa aikin fassarar ku ya yi yawa ta hanyar ƙara sabbin strings marasa alaƙa.

Tabbatar kun duba cikakken misali a bayaninmu na GitHub. A can, za ku kuma sami misali na yadda ake yin wannan ta amfani da App Router! Idan kun gamu da wata matsala, ku ji daɗin tuntuɓar mu, za mu yi matuƙar farin cikin taimaka muku.

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