Yadda ake aiwatar da internationalization (kafa goyon bayan harsuna da dama) a cikin aikace‑aikacen Next.js da ke amfani da Pages Router

Yayin da duniya ke ƙara haɗuwa, yana ƙara zama mai muhimmanci ga masu haɓaka yanar gizo su gina aikace-aikace waɗanda za su iya biyan buƙatun masu amfani daga ƙasashe da al'adu daban-daban. Ɗaya daga cikin manyan hanyoyin da za a cimma haka 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 darasin, za mu bincika yadda za a ƙara internationalization zuwa aikace-aikacen React Next.js ɗinka, tare da server side rendering. TL;DR: Duba cikakken misali a nan.

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

Mataki 1: Shigar da ɗakin karatu na i18n

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

TacoTranslate yana ta atomatik fassara jimlolinka zuwa kowane harshe ta amfani da fasahar AI ta zamani, kuma yana 'yantar da kai daga aikin gundura na sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kun shigar da modul ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate ɗinku, aikin fassara, da maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Yana kyauta, kuma ba ya buƙatar ku saka katin bashi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aiki, sannan ka je shafin maɓallan API na shi. Ƙirƙiri ɗaya read maɓalli, da kuma ɗaya read/write maɓalli. Za mu adana su azaman canje-canjen muhalli. Maɓallin read shi ake kira public, kuma maɓallin read/write shi ne secret. Misali, za ka iya ƙara su a cikin fayil .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ka taɓa fallasa sirrin maɓallin API read/write ga muhalli na samarwa na ɓangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yare ta madadin na tsoho. A cikin wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folder” inda za a adana rubutun ku, 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 sauƙaƙa sake amfani da shi daga baya. Yanzu, ta amfani da na musamman /pages/_app.tsx, za mu ƙara mai samarwa 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 keɓaɓɓen pageProps da _app.tsx, don Allah ku faɗaɗa bayanin tare da siffofi da lambar daga sama.

Mataki na 4: Aiwatar da nunin shafi a gefen sabar

TacoTranslate yana ba da damar yin fassara a ɓangaren uwar garke (server-side rendering) na fassarorin ku. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun da aka fassara nan take, maimakon samun fitowar abun da ba a fassara ba da farko. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a gefen abokin ciniki, saboda 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 ya dace da saitin ku. Idan true, TacoTranslate zai bayyana mabudin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko staging (isProduction is false), za mu yi amfani da sirrin mabudin API read/write 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 goyan baya. Mataki na gaba shi ne a samo fassarori don dukkan shafukanku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps dangane da bukatunku.

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

Don amfani da kowanne 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 rubutun a cikin dukkan 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 ɗinka yanzu za a fassara ta atomatik lokacin da ka ƙara kowane rubutu zuwa wani Translate component. Lura cewa za a iya ƙirƙirar sabbin rubutu da za a fassara ne kawai a mahalli da ke da izinin read/write a kan mabudin API. Muna ba da shawarar ku sami wani rufe kuma mai tsaro na mahalli na gwaji (staging) inda za ku iya gwada aikace‑aikacen samarwa (production) ɗinku tare da irin wannan mabudin API, kuna ƙara sabbin rubutu kafin ku fara aiki kai tsaye. Wannan zai hana duk wanda zai yi ƙoƙarin satar sirrin mabudin API ɗinku, kuma zai iya haifar da ƙarin cunkoso ga aikin fassarar ku ta hanyar ƙara sabbin rubutu 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, ji daɗin tuntuɓar mu, za mu yi matuƙar farin cikin taimaka muku.

TacoTranslate yana ba ku damar saita aikace-aikacen React ɗinku cikin harsuna ta atomatik, cikin sauri, zuwa da daga harsuna sama da 75. Fara a yau!