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

Yayinda duniya ke kara fadada ta fuskar hadin kai, yana kara zama mahimmanci ga masu haɓaka yanar gizo su gina aikace-aikace da zasu iya biyan bukatun masu amfani daga kasashe da al'adu daban-daban. Daya daga cikin muhimman hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda yake ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, kudade, da tsarin kwanaki.

A cikin wannan koyarwar, za mu bincika yadda ake ƙara internationalization zuwa aikace-aikacen React Next.js ɗinka, tare da yin rendering a gefen 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 madadin.

Mataki na 1: Shigar da ɗakin karatu na i18n

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

TacoTranslate yana fassara dogon rubutunku ta atomatik zuwa kowace harshe ta amfani da ingantaccen AI, kuma yana 'yantar da ku daga gajiyar sarrafa fayilolin JSON.

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

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, wata aikin fassara, da kuma makullin API da suka dace. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka saka katin kuɗi.

A cikin UI ɗin aikace-aikacen TacoTranslate, ƙirƙiri wani aiki, sannan ka kewaya zuwa shafin makullin API ɗinsa. Ƙirƙiri guda ɗaya na read key, da guda ɗaya na read/write key. Za mu adana su a matsayin canje-canje na muhalli. 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 .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ka taba fallasa sirrin read/write na API ga yanayin ƙera a ɓangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar wuri ɗin fadowar tsoho. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a adana jumlolin ku, kamar adireshin URL na gidan yanar gizonku. Kara karantawa game da asali anan.

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

Mataki na 3: Saita TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 yi wa TACOTRANSLATE_API_KEY ƙayyadadden ta atomatik nan ba da jimawa ba.

Kirkirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa amfani da shi daga baya. Yanzu, ta amfani da keɓaɓɓen /pages/_app.tsx, za mu ƙara mai bayarwa 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 custom pageProps da _app.tsx, da fatan za a faɗaɗa ma'anar tare da abubuwan da lambobin da ke sama.

Mataki na 4: Aiwtar da fassarar ɓangaren uwar garke

TacoTranslate yana ba da damar yin fassarar ɓangaren uwar garke na fassarar ku. Wannan yana haɓaka ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan take, maimakon nuna gajeren bayyanar 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 mun riga mun sami duk fassarar 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 dubawar isProduction don dacewa da saitin ka. Idan true, TacoTranslate zai fito da maɓallin API na jama'a. Idan muna cikin gida, gwaji, ko yanayin tsari (isProduction is false), za mu yi amfani da maɓallin sirri read/write API don tabbatar da cewa an aika sabbin igiyoyi don fassara.

Har zuwa yanzu, mun sanya aikace-aikacen Next.js kawai tare da jerin harsunan da aka tallafa. Abu na gaba da za mu yi shi ne karɓar fassarar duk shafukanka. Don yin wannan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatunku.

Waɗannan ayyuka suna ɗaukar hujjoji uku: abu ɗaya Next.js Static Props Context , daidaitawa don TacoTranslate, da zaɓi na Next.js kaddarorin. Ka lura cewa an saita revalidate a kan getTacoTranslateStaticProps zuwa 60 ta tsoho, don fassararka ta kasance ta yau da kullun.

Don amfani da kowane aiki a cikin shafi, bari mu ɗauka kana 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 ka iya amfani da Translate ɓangaren don fassara igiyoyi a cikin dukkanin ɓangarorin React ɗinka.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Kaddamar da gwaji!

Mun gama! Yanzu aikace-aikacen React ɗin ku zai kasance yana fassara ta atomatik lokacin da kuka ƙara kowace irin jumla zuwa cikin Translate sashi. Ku lura cewa kawai yanayi masu izinin read/write da ke kan maɓallin API ne za su iya ƙirƙirar sababbin jumloli don fassara. Muna ba da shawarar samun yanayi mai kulle da tsaro na gwaji inda zaku iya gwada aikace-aikacen samarwa na ku tare da irin wannan maɓallin API, ta hanyar ƙara sababbin jumloli kafin a tura zuwa tsarin aiki. Wannan zai hana kowa daga sata sirrin maɓallin API ɗin ku, kuma hakan na iya hana aikin fassarar ku cika da sababbin jumloli marasa alaƙa.

Ka tabbata ka 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 kowanne matsala, kada ka yi jinkiri ka tuntube mu, kuma za mu yi farin cikin taimaka maka.

TacoTranslate yana ba ka damar daidaita aikace-aikacen React dinka ta atomatik cikin sauri zuwa kowace harshe da dawowa. Fara a yau!