Yadda za a aiwatar da internationalization a cikin aikace-aikacen Next.js wanda ke amfani da Pages Router

Yayinda duniya ke kara haɗa juna, yana da matuƙar muhimmanci ga masu haɓaka gidan yanar gizo su gina manhajoji da za su iya biyan bukatun masu amfani daga ƙasashe da al'adu daban-daban. Ɗaya daga cikin manyan hanyoyin cimma hakan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita manhajarka ga harsuna daban-daban, nau'ukan kuɗi, da tsarin kwanan wata.

A cikin wannan darasin, za mu bincika yadda ake ƙara internationalization zuwa aikace-aikacen React Next.js ɗinka, tare da server-side rendering. TL;DR: Duba cikakken misali anan.

Wannan jagora yana 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 fassarar ƙasa-da-ƙasa (internationalization) a cikin aikace-aikacen Next.js ɗinku, za mu fara da zaɓar ɗakin karatu na i18n. Akwai wasu shahararrun ɗakunan karatu, 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 harshe ta amfani da sabuwar fasahar AI, kuma yana 'yantar da ku daga wahalar kula da fayilolin JSON.

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

npm install tacotranslate

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

Yanzu da kuka shigar da module ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate ɗinku, aikin fassara, da maballan API da suka dace. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ku saka kati na bashi.

A cikin UI na aikace‑aikacen TacoTranslate, ƙirƙiri wani aiki, sannan je zuwa shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli guda ɗaya read, da maɓalli guda ɗaya read/write. Za mu ajiye su a matsayin maɓallan 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 cikin fayil .env a tushen aikin ku.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Za mu kuma ƙara wasu masu canji na muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren madadin (fallback) ta tsoho. A cikin wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folder” inda za a ajiye rubutunku, kamar adireshin URL na 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 cikin 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 a ƙayyade TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Kirkirar abokin ciniki a cikin 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 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 keɓaɓɓun pageProps da _app.tsx, da fatan za a faɗaɗa ma'anar tare da siffofi da lambar daga sama.

Mataki na 4: Aiwatar da nuna shafi daga ɓangaren uwar garke

TacoTranslate yana ba da damar gudanar da fassarar ku daga ɓangaren uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun da aka fassara nan take, maimakon fara da gajeren nunin abun da ba a fassara ba. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda muna da duk fassarar 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 saitinka. Idan true, TacoTranslate zai bayyana maɓallin API na jama'a. Idan muna cikin yanayin gida, na gwaji, ko na staging (isProduction is false), za mu yi amfani da sirrin read/write maɓallin API don tabbatar an aika sabbin rubutu don fassara.

Har zuwa yanzu, mun saita aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake tallafawa. Abu na gaba da za mu yi shi ne karɓar fassoshin duk shafukan ku. Don yin haka, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatunku.

Wadannan ayyuka suna ɗaukar hujjoji guda uku: Abu ɗaya Next.js Static Props Context, saituna don TacoTranslate, da zaɓaɓɓun kadarorin Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 a matsayin tsohuwa, don haka fassarorinku su kasance sabuntattu.

Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, bari mu ɗauka kuna da fayil na 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 bangaren Translate don fassara rubutu 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 ɗinku yanzu za a fassara shi ta atomatik lokacin da kuka ƙara kowane rubutu zuwa Translate sashi. Lura cewa sai muhallin da ke da izinin read/write a kan mabuɗin API ne kawai zai iya ƙirƙirar sababbin rubutu da za a fassara. Muna ba da shawarar ku sami muhallin gwaji na rufe kuma mai tsaro inda za ku iya gwada aikace-aikacen samarwa tare da irin wannan mabuɗin API, kuna ƙara sababbin rubutu kafin a tura shi zuwa yanayi na ainihi. Wannan zai hana kowa sace mabuɗin API ɗinku na sirri, kuma zai iya cunkoso aikin fassarar ku ta hanyar ƙara sababbin rubutu marasa alaƙa.

Tabbatar ku duba cikakken misalin a shafinmu na GitHub. A can, za ku kuma sami misali na yadda ake yin wannan ta amfani da App Router! Idan kuka gamu da wata matsala, kar ku yi shakka ku tuntube mu, za mu yi matukar farin cikin taimaka muku.

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