Yadda ake aiwatar da i18n (amfani da harsuna da yawa) a cikin aikace-aikacen Next.js wanda ke amfani da Pages Router

Yayinda duniya ke ƙara zama ta ƙasa da ƙasa, yana ƙara zama muhimmi ga masu haɓaka yanar gizo su gina aikace-aikace da za su iya bauta wa masu amfani daga ƙasashe da al'adu daban-daban. Ɗaya daga cikin muhimman hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka ga harsuna daban-daban, nau'ikan kuɗi, da tsarin kwanan wata.

A cikin wannan darasin, za mu nuna yadda ake ƙara internationalization a cikin aikace-aikacen React Next.js ɗinku, tare da nunawa a ɓangaren uwar gami (server-side rendering). 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 duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da internationalization a cikin aikace-aikacen Next.js dinka, za mu fara da zaɓar ɗakin karatu na i18n. Akwai ɗimbin shahararrun ɗakunan karatu, ciki har da next-intl. Sai dai, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutun ku ta atomatik zuwa kowace harshe ta amfani da sabuwar fasahar AI, kuma yana 'yantar da ku daga gajiyar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate na kyauta

Yanzu da kun girka wannan module, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate ɗinku, wani aikin fassara, da maɓallan API masu alaƙa. Ƙirƙiri asusu a nan. Kyauta ne, kuma ba ya buƙatar ku ƙara katin kuɗi.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taba saki sirrin read/write maballin API zuwa yanayin samarwa na bangaren abokin ciniki.

Za mu kuma ƙara wasu mabuɗan muhallin guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar saitin yare na tsoho (fallback). A cikin wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folda” inda za a adana rubutun ku, misali adireshin URL na gidan yanar gizonku. Kara karanta game da tushen a nan.

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

Mataki na 3: Saita TacoTranslate

Don haɗa TacoTranslate da aikace-aikacinka, za ka 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 mu ayyana TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sa ya fi sauƙi a sake amfani da shi daga baya. Yanzu, ta amfani da wani na musamman /pages/_app.tsx, za mu ƙara mai samar 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 pageProps na musamman da _app.tsx, don Allah faɗaɗa bayanin tare da siffofi da lambar da ke sama.

Mataki na 4: Aiwatar da nunawa a ɓangaren uwar-garke

TacoTranslate yana ba da damar yin rendering a gefen uwar garke na fassarar ku. Wannan yana ƙwarai inganta ƙwarewar mai amfani ta hanyar nuna abun da aka fassara nan take, maimakon ganin gajeren nunin abun da ba a fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a bangaren abokin ciniki, domin riga mun tanadi dukkan fassarorin da muke buƙata.

Za mu fara ta ƙirƙirar 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'),
	});
};

Daidaita duba isProduction don ya dace da saitinka. Idan true, TacoTranslate zai bayyana mabuɗin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko na staging (isProduction is false), za mu yi amfani da sirrin mabuɗin API na read/write don tabbatar da cewa ana aika sababbin kirtani don fassara.

Har zuwa yanzu, mun saita aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake goyon baya. Abu na gaba da za mu yi shi ne samun fassarar duk shafukanku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga buƙatunku.

Wadannan ayyuka suna karɓar hujjoji guda uku: abu ɗaya na Next.js Static Props Context, saitin (configuration) don TacoTranslate, da zaɓaɓɓun ƙaddarorin Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassararku za su kasance masu sabuntawa.

Don amfani da kowanne daga cikin waɗannan ayyukan 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 don fassara kirtani a cikin dukkanin 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 ɗinku yanzu za a fassara ta atomatik lokacin da kuka ƙara kowane rubutu a cikin Translate component. Lura cewa sai kawai muhallin da ke da izinin read/write a kan maɓallin API zai iya ƙirƙirar sabbin rubutu da za a fassara. Muna ba da shawarar ku sami muhalli na gwaji (staging) wanda aka rufe kuma aka tsare, inda za ku iya gwada aikace-aikacen ku na samarwa (production) tare da irin wannan maɓallin API, kuna ƙara sabbin rubutu kafin ƙaddamarwa. Wannan zai hana duk wanda duk wanda ke ƙoƙarin sata maɓallin API ɗin ku na sirri, kuma zai iya hana aikin fassarar ku cika da sabbin rubutu 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!