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

Yayin da duniya ke ƙara haɗuwa, 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 shine ta hanyar ƙasa da ƙasa (i18n), wanda ke ba ka damar daidaita aikace-aikacenka ga harsuna, kuɗaɗe, da tsarin kwanan wata daban-daban.

A cikin wannan koyarwar, za mu bincika yadda ake ƙara ƙasa da ƙasa zuwa aikace-aikacen React Next.js ɗinka, tare da nuna bayanan uwar garke. TL;DR: Duba cikakken misali anan.

Wannan jagorar tana nufin aikace-aikacen Next.js waɗanda 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 ƙasa da ƙasa a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗakunan karatu da dama da suka shahara, ciki har da next-intl. Duk da haka, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

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

Bari mu girka shi ta amfani da npm a tashar ku:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka shigar da wannan module, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate ɗinka, aikin fassara, da maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka saka katin kuɗi.

A cikin UI ɗin manhajar TacoTranslate, ƙirƙiri wani aikin, sannan ka tafi zuwa shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli guda ɗaya na read, da kuma maɓalli guda ɗaya na read/write. Za mu ajiye 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. Alal misali, za ka iya ƙara su cikin fayil ɗin .env a babban babban fayil na aikinka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taba zubar da sirrin read/write mabudin API zuwa muhalli na samarwa a bangaren abokin ciniki.

Zamu kara wasu ƙarin sauyawar muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar ɗakin harshe da za a koma gare ta ta asali. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a ajiye layukan rubutunku, kamar adireshin URL na gidan yanar gizonku. Kara karantawa game da asalinsu anan.

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

Mataki na 3: Sanya TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar abokin ciniki ta amfani da maɓallan API ɗin 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 kasance muna ta atomatik ƙayyade TACOTRANSLATE_API_KEY nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sa ya fi sauƙin amfani nan gaba. Yanzu, ta amfani da na musamman /pages/_app.tsx, za mu ƙara mai ba da TacoTranslate service.

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 kana da na musamman pageProps da _app.tsx, don Allah ka ƙara faɗaɗa ma’anar tare da kayan aikin da lambar da ke sama.

Mataki na 4: Aiwhatar da fassarar ɓangaren uwar garke

TacoTranslate yana ba da damar yin fassarar bangaren uwar garke na fassarorinku. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan take, maimakon haskakawa na abun ciki da ba a fassara ba a farko. 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 tare da jerin yaren da ake goyan baya kawai. Abin da za mu yi na gaba shi ne ɗaukar fassarori don dukkan shafukan ku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatun ku.

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

Don amfani da kowanne daga cikin ayyukan a cikin shafi, bari mu yi tsammanin 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 ƙashi don fassara jimloli a cikin dukkanin ƙananan abubuwan 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 mai fassara ta atomatik lokacin da kuka ƙara kowace irin rubutu a cikin Translate ƙari. Lura cewa ƙungiyoyin da ke da izinin read/write akan maɓallin API kawai ne za su iya ƙirƙirar sabbin rubutu don a fassara su. Muna ba da shawarar ku kasance da yanayi na gwaji wanda aka rufe kuma yake da tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, kuna ƙara sabbin rubutu kafin a kaddamar. Wannan zai hana kowa satar sirrin maɓallin API ɗinku, kuma zai iya hana ƙarin ɗimbin rubutu marasa alaƙa da aikin fassarar ku.

Ka tabbata ka duba cikakken misali a shafinmu na GitHub. A wurin, za ka kuma sami misali na yadda ake yin wannan ta amfani da App Router! Idan ka samu wasu matsaloli, kada ka yi jinkiri ka tuntube mu, za mu yi farin cikin taimaka maka.

TacoTranslate yana ba ka damar samun sauƙin fassara aikace-aikacen React naka ta atomatik cikin sauri zuwa ko daga kowace harshe. Fara yau!