Mafi kyawun mafita don ƙasa da ƙasa (i18n) a cikin Next.js apps

Yadda yake aiki

Yayinda duniya ke kara zama ta duniya baki daya, yana da muhimmanci ga masu ƙirƙirar yanar gizo su gina aikace-aikace da zasu iya biyan bukatun masu amfani daga kasashe daban-daban da al'adu. Daya daga cikin manyan hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, kudaden kasashen waje, da tsare-tsaren kwanaki.

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: Ga cikakken misali a nan.

Wannan jagorar tana nufin aikace-aikacen Next.js waɗanda suke 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 ƙasar duniya (internationalization) a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai wasu ɗakunan karatu masu shahara, ciki har da next-intl. Duk da haka, a cikin wannan misali, za mu yi amfani da TacoTranslate.

TacoTranslate tana fassara rubutunku kai tsaye zuwa kowace harshe ta amfani da AI na zamani, kuma tana 'yantar da ku daga wahalar sarrafa fayilolin JSON.

Bari mu girka ta 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, wani aikin fassara, da kuma maɓallan API masu alaka. Ƙirƙiri asusu anan. Yana da kyauta, kuma ba ya buƙatar ka ƙara kati na kuɗi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka je zuwa shafin maɓallan API dinsa. Ƙirƙiri maɓalli guda ɗaya na read, da maɓalli guda ɗaya na read/write. Za mu adana su a matsayin canje-canje na muhalli (environment variables). Maɓallin read shine abin da muke kira public kuma maɓallin read/write shine secret. Misali, za ka iya ƙara su zuwa fayil .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taɓa fallasa sirrin maɓallin API na read/write ga yanayin samar da abokin ciniki na ɓangaren client.

Za mu kuma ƙara wasu ƙarin sauyawar yanayi guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar wurin harshen da za a koma a kai ta tsohuwa. A wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Fayil” inda za a adana kalmomin ka, kamar adireshin URL na shafinka na yanar gizo. Kara karantawa game da tushen anan.

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

Mataki na 3: Saitin TacoTranslate

Don haɗa TacoTranslate tare da aikace-aikacen ku, kuna buƙatar ƙirƙirar abokin ciniki ta amfani da maɓallan API daga baya. Alal misali, ƙirƙirar fayil ɗin da ake kira /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 ma'anar TACOTRANSLATE_API_KEY ta atomatik nan ba da daɗewa ba.

Ƙirƙirar abokin ciniki a cikin fayil ɗin daban yana sa ya fi sauƙin amfani da shi daga baya. Yanzu, ta amfani da keɓaɓɓen /pages/_app.tsx, za mu ƙara mai bayar 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 na al'ada da _app.tsx, don Allah ku ƙara ma'anar tare da ƙaddarorin da kuma lambar daga sama.

Mataki na 4: Aiƙacewar fassarar ɓangaren sabar (server side rendering)

TacoTranslate yana ba da damar yin fassarar ɓangaren uwar garke na fassarorinku. Wannan yana inganta kwarewar mai amfani sosai ta hanyar nuna abun cikin da aka fassara nan da nan, maimakon nuna abun ciki mara fassara da fari. Bugu da kari, za mu iya tsallake buƙatun cibiyar sadarwa a bangaren abokin ciniki, saboda muna da dukkan fassarorin da muke bukata a riga.

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 nuna mabuɗin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko gwaji mai shiri (isProduction is false), za mu yi amfani da sirrin read/write mabuɗin API don tabbatar da cewa sabbin jimloli suna tura zuwa fassara.

Har zuwa yanzu, mun saita aikace-aikacen Next.js ne kawai tare da jerin harsunan da muke tallafawa. Abin da za mu yi na gaba shi ne samo fassarar dukkan shafukan ka. Don yin hakan, za ka yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatunka.

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

Don amfani da kowanne aiki a cikin shafi, 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 ka iya amfani da Translate sashi don fassara igiyoyi cikin dukkanin sassa na React ɗinka.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Kaddamar da gwada!

Mun gama! Yanzu aikace-aikacen Next.js ɗinku zai fassara ta atomatik lokacin da kuka ƙara kowane igiyar rubutu zuwa Translate sashi. Ku lura cewa yanayin kawai da ke da izinin read/write akan maɓallin API za su iya ƙirƙirar sabbin igiyar rubutu don a fassara su. Muna ba da shawarar ku sami yanayi na gwaji wanda aka rufe kuma aka tsare inda zaku iya gwada aikace-aikacen ku na samarwa tare da maɓallin API irin wannan, ta hanyar ƙara sabbin igiyar rubutu kafin a fara amfani da shi. Wannan zai hana kowa satar maɓallin API ɗinku na sirri, kuma yana iya hana yawan ƙarin igiyar rubutu da ba su da alaƙa da aikin fassara.

Tabbatar ka duba cikakken misalin a cikin bayananmu na GitHub. A can, za ka kuma sami misali na yadda ake yin wannan ta amfani da App Router! Idan ka fuskanci kowace matsala, kada ka yi jinkiri ka tuntube mu, kuma za mu yi farin cikin taimakawa.

TacoTranslate yana baka damar fassara aikace-aikacen React dinka cikin sauri kai tsaye zuwa da daga kowace harshe. Fara a yau!