Yadda ake aiwatar da tallafin harsuna da yawa (i18n) a cikin aikace‑aikacen Next.js da 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 ne don 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 ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗimbin ɗakunan karatu masu 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 harshe ta amfani da fasahar AI mai ci gaba, kuma yana 'yantar da ku daga wahalar 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 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 project, sannan ka je shafin API keys dinsa. Ƙirƙiri maɓalli guda ɗaya na read, da guda ɗaya na read/write. Za mu ajiye su a matsayin environment variables. Ana kiran maɓallin read da public, yayin da maɓallin read/write shi ne secret. Misali, za ka iya ƙara su zuwa fayil .env a tushen project ɗinka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar cewa ba za ka taɓa fallasa sirrin maɓallin API read/write ga yanayin samarwa na ɓangaren abokin ciniki ba.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar wurin yare na tsoho da za a koma idan babu fassara. A cikin wannan misalin, za mu sa shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folder” inda za a adana rubutun ku, kamar URL na shafin 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 da aikace-aikacenku, za ku buƙaci ƙirƙirar wani 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 a ƙayyade TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Sanya client a cikin fayil daban zai sauƙaƙa sake amfani da shi a nan gaba. 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 kuna da pageProps da _app.tsx na musamman, don Allah ku faɗaɗa ma'anarsu tare da siffofi da lambobin daga sama.

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

TacoTranslate yana ba da damar gudanar da fassarar ku a ɓangaren uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta nuna abun cikin da aka fassara nan da nan, maimakon ganin ɗan gajeren lokaci na abun ciki da ba a fassara ba da farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda tuni muna da dukkan fassarar da muke buƙata.

Za mu fara da ƙirƙiri 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 samun fassarori don duk shafukanku. Don yin haka, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps dangane da bukatunku.

Wadannan ayyuka suna karɓar hujjoji guda uku: ɗaya Next.js Static Props Context abu, saituna don TacoTranslate, da zaɓaɓɓun ƙaddarorin Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 a matsayin tsoho, don haka fassarorinku za su kasance masu sabuntawa.

Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, muce kana 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 Translate bangare don fassara kirtani a cikin dukkanin abubuwan 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 ɗin ku yanzu za a fassara ta atomatik lokacin da kuka ƙara kowane rubutu zuwa Translate bangare. Lura cewa sai muhallai ne kawai da ke da izinin read/write a kan maɓallin API za su iya ƙirƙirar sabbin rubutu da za a fassara. Muna ba da shawarar ku sami wani muhallin staging da aka rufe kuma mai tsaro, inda za ku gwada aikace‑aikacen ku na samarwa tare da irin wannan maɓallin API, kuma ku ƙara sabbin rubutu kafin ku fitar da shi a gidan yanar gizo. Wannan zai hana kowa satar maɓallin API ɗin ku na asiri, kuma zai rage yiwuwar cika aikin fassarar ku ta hanyar ƙara sabbin 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!