Yadda ake aiwatar da ƙasa-Ƙasa a cikin aikace-aikacen Next.js wanda ke amfani da Pages Router

Yayinda duniya ke kara zama mai hade, yana da muhimmanci sosai ga masu haɓaka yanar gizo su gina aikace-aikace waɗanda 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 internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka da harsuna, kudade, da tsarin kwanaki daban-daban.

A cikin wannan koyarwar, za mu bincika yadda ake ƙara internationalization ga aikace-aikacen React Next.js naka, tare da ɓullar sabobin yanar gizo (server side rendering). TL;DR: Duba cikakken misali anan.

Wannan jagorar tana nufin 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 na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da ƙasashen duniya a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓan ɗakin karatu na i18n. Akwai ɗakunan karatu da dama da aka fi sani, ciki har da next-intl. Duk da haka, a wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara jerin kalmomin ku ta atomatik zuwa kowace harshe ta amfani da AI na zamani, kuma yana 'yantar da ku daga wahalar sarrafa fayilolin JSON.

Mu girka shi ta amfani da npm a cikin tashar umarni:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kuka shigar da wannan module, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate ɗinku, wani aikin fassara, da kuma makullin API da suka dace. Ƙirƙiri asusu a nan. Kyauta ne, kuma ba ya buƙatar ku ƙara katin kuɗi.

A cikin UI ɗin aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka je zuwa alamar maɓallan API ɗinsa. Ƙirƙiri maɓalli guda ɗaya na read, da guda ɗaya na read/write. Za mu adana su a matsayin canje-canje na 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 a cikin fayil ɗin .env a babban kundin aikinka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren da aka saita a matsayin tsoho idan ba a sami fassara ba. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a adana bayanan rubutun ku, kamar adireshin URL na gidan yanar gizon ku. 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-aikacen ku, za ku buƙaci ƙirƙirar abokin ciniki ta amfani da maɓallan API daga 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 kasance muna ƙirƙirar TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin fayil daban yana sauƙaƙa amfani da shi nan gaba. Yanzu, ta amfani da ƙirar musamman /pages/_app.tsx, za mu ƙara mai bayar 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 kuna da na musamman pageProps da _app.tsx, da fatan za a faɗaɗa ƙayyadadden tare da abubuwan da lambar da ke sama.

Mataki na 4: Aiwtar da fassarar bangaren uwar garke

TacoTranslate yana ba da damar yin rendering na ɓangaren uwar garke na fassarar ku. Wannan yana ƙara inganta ƙwarewar mai amfani ta hanyar nuna abun da aka fassara nan da nan, maimakon bayyana abun da ba a fassara ba da farko. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a bangaren abokin ciniki, saboda tuni muna da duk fassarorin da muke buƙata.

Za mu fara ne 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 dacewa da saitin ku. Idan true, TacoTranslate zai nuna maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko mataki (isProduction is false), za mu yi amfani da sirrin maɓallin API na read/write don tabbatar da cewa sabbin jimloli an aika su don fassara.

Har zuwa yanzu, mun ƙirƙiri aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake tallafawa. Abin da za mu yi gaba shine mu samo fassarar dukkan shafukan ku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps dangane da bukatunku.

Wadannan ayyuka suna ɗaukar hujjoji guda uku: Ɗaya Next.js Static Props Context abu, saitin don TacoTranslate, da zaɓaɓɓun kayan aikin Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassarar ku su kasance a sabunta.

Don amfani da kowannensu 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 ɓangare don fassara igiyoyi a cikin dukkan ɓangarorin React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Yi deploy kuma gwada!

Mun gama! Aikace-aikacen React ɗinku zai kasance ana fassara ta atomatik lokacin da kuka ƙara kowace sarkar rubutu zuwa ga Translate component. Lura cewa yanayi kawai masu izinin read/write a kan maɓallin API za su iya ƙirƙirar sabon sarkar rubutu domin a fassara. Muna ba da shawarar ku sami yanayin gwaji da aka rufe kuma aka kiyaye inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, ta hanyar ƙara sabbin sarkoki kafin a tura kai tsaye. Wannan zai hana kowa kwasar sirrin maɓallin API ɗinku, kuma zai hana yiwuwar ɗaukar nauyi a aikin fassara ta hanyar ƙara sabbin, ba su da alaka da juna sarkoki.

Tabbatar da duba cikakken misali a shafinmu na GitHub. A can, za ka kuma sami misali na yadda ake yin wannan ta amfani da App Router ! Idan ka fuskanci kowace matsala, kar ka yi jinkirin tuntubar mu, kuma za mu yi farin cikin taimakawa.

TacoTranslate yana ba ka damar fassara aikace-aikacen React ɗinka kai tsaye cikin sauri daga kowace harshe zuwa wani. Fara yau!