Mafi kyawun mafita don ƙasa-da-ƙasa (i18n) a cikin aikace-aikacen Next.js

Yadda yake aiki

Yayin da duniya ke ƙara haɗuwa, yana ƙara zama dole ga masu haɓaka yanar gizo su gina aikace-aikace waɗanda za su iya biyan bukatun masu amfani daga ƙasashe da al'adu daban-daban. Daya daga cikin muhimman hanyoyin cimma wannan shi ne ta internationalization (i18n), wadda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, kuɗaɗe, da tsarin kwanan wata.

A cikin wannan darasin, za mu nuna yadda ake ƙara internationalization ga aikace-aikacen React Next.js ɗinku, tare da nunawa a gefen uwar garke. TL;DR: Duba cikakken misalin anan.

Wannan jagora ne ga aikace-aikacen Next.js da 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 ɗinka, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗakunan karatu da yawa masu shahara, ciki har da next-intl. Duk da haka, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubuce-rubucenku ta atomatik zuwa kowace harshe ta amfani da fasahar AI ta zamani, 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 na kyauta

Yanzu da kun shigar da wannan module, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate ɗinku, aikin fassara, da makullin API da suka haɗa. Ƙirƙiri asusu a nan. Yana kyauta, kuma ba ya buƙatar ku ƙara katin kiredit.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, kuma je zuwa shafin maballan API dinsa. Ƙirƙiri mabuɗin read guda ɗaya, da mabuɗin read/write guda ɗaya. Za mu ajiye su a matsayin canje-canjen muhalli (environment variables). Mabuɗin read shi ne abin da muke kira public, kuma mabuɗin read/write shi ne secret. Alal misali, za ka iya ƙara su cikin fayil .env a tushen (root) aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Za mu kuma ƙara wasu saitunan muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar tsohuwar mayar da hankali (fallback locale). A wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: Babban fayil inda za a adana rubutunku, misali 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 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 mu ayyana TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar client a cikin wani fayil daban yana sauƙaƙa a sake amfani da shi daga baya. Yanzu, ta amfani da wani keɓaɓɓen /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 na al'ada pageProps da _app.tsx, don Allah ku faɗaɗa bayanin tare da ƙaddarorin da lambar da ke sama.

Mataki na 4: Aiwatar da nunin daga ɓangaren uwar garke

TacoTranslate yana ba da damar yin nunin fassarar ku a gefen uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abubuwan da aka fassara nan da nan, maimakon nuna abubuwan da ba a fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda riga mun sami duk fassarar da muke buƙata.

Za mu fara 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 binciken isProduction don ya dace da saitinka. Idan true, TacoTranslate zai bayyana mabuɗin API na jama'a. Idan muna a cikin yanayin gida, gwaji, ko staging (isProduction is false), za mu yi amfani da sirrin mabuɗin API na read/write don tabbatar da cewa an aika sababbin rubutu don fassara.

Har zuwa yanzu, mun saita aikace‑aikacen Next.js ne kawai tare da jerin harsunan da ake tallafawa. Abin da za mu yi na gaba shi ne mu samo fassarar duk shafukanku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps gwargwadon bukatunku.

Waɗannan ayyuka suna ɗaukar hujjoji uku: Ɗaya abu na Next.js Static Props Context, saitin TacoTranslate, da zaɓaɓɓun ƙaddarorin Next.js. Ka lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 a matsayin tsoho, don haka fassarorinku su kasance na zamani.

Don amfani da kowanne daga cikin waɗannan ayyukan a shafi, za mu ɗauka 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 sashi don fassara rubuce-rubuce a cikin dukkan sassan React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Kaddamar kuma gwada!

Mun kammala! Aikace-aikacen Next.js ɗinku yanzu za a fassara ta atomatik idan kuka ƙara duk wani rubutu cikin Translate sashi. Lura cewa sai kawai muhalli da ke da izinin read/write a maɓallin API ne za su iya ƙirƙirar sabbin rubutu da za a fassara. Muna ba da shawarar ku samar da wurin gwaji (staging) mai rufaffe kuma mai tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, kuna ƙara sabbin rubutu kafin a tura shi kai tsaye. Wannan zai hana duk wanda ya sace maɓallin API ɗin ku na sirri, kuma zai iya hana aikin fassarar ku yin cunkoso ta hanyar ƙara sabbin rubutu marasa alaƙa.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!