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

Yadda yake aiki

Yayinda duniya ke ƙara zama mai haɗin kai, yana ƙara zama dole ga masu haɓaka yanar gizo su gina aikace‑aikace da za su iya biyan buƙatun masu amfani daga ƙasashe da al'adu daban‑daban. Ɗaya daga cikin manyan hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace‑aikacenka zuwa 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: Ga cikakken misalin anan.

Wannan jagorar tana nufin 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 (i18n) a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar laburaren i18n. Akwai laburare da dama masu shahara, ciki har da next-intl. Koyaya, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutun ku ta atomatik zuwa kowace harshe ta amfani da AI mai matuƙar ci gaba, kuma yana 'yantar da ku daga aikin gajiyar 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 kun girka module ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate, aikin fassara, da makullin API masu alaƙa. Ƙirƙiri asusu anan. Yana kyauta, kuma ba a buƙatar saka katin bashi.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taba fallasa sirrin mabudin API read/write ga muhalli na samarwa na bangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren da ake amfani da ita a matsayin madadin (fallback). A wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folder” inda za a adana rubutun ku, misali 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

Domin 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. Alal 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 hulɗa a cikin wani fayil daban yana sauƙaƙa sake amfani da shi daga baya. Yanzu, ta amfani da wani na musamman /pages/_app.tsx, za mu ƙara mai bayarwa na 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, da fatan za ku faɗaɗa ƙayyadadden bayanin su tare da siffofi da lambar da ke sama.

Mataki na 4: Aiwatar da nunin gefen uwar garke

TacoTranslate yana ba da damar yin nunin fassara daga ɓangaren uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abin da aka fassara nan take, maimakon fara da nunin abin da ba a fassara ba. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda mun riga mun samu duk fassarorin da muke buƙata.

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

Daidaita gwajin isProduction don ya dace da saitinka. Idan true, TacoTranslate zai bayyana maɓallin API na jama'a. Idan muna cikin mahalli na gida, gwaji, ko staging (isProduction is false), za mu yi amfani da asirin maɓallin API na read/write don tabbatar da cewa sababbin kirtani ana aika su 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 ɗauko fassarorin dukkan shafuka. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps gwargwadon bukatunku.

Wadannan ayyukan suna karɓar hujjoji uku: abu ɗaya na Next.js Static Props Context, saitin TacoTranslate, da kuma zaɓaɓɓun kadarorin Next.js. Lura cewa revalidate a cikin getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassarorinku za su kasance sabuntattu.

Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, 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!"/>;
}

Yanzu ya kamata ku iya amfani da Translate bangare don fassara rubutu a cikin duk bangarorin React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Tura kuma gwada!

Mun gama! Aikace‑aikacen Next.js ɗinka za a fassara shi ta atomatik yanzu lokacin da ka ƙara kowanne matani zuwa Translate component. Lura cewa yanayi ne kawai da ke da izinin read/write a kan maɓallin API za su iya ƙirƙirar sababbin matani da za a fassara. Muna ba da shawarar ka tanadi rufaffen kuma mai tsaro wurin gwaji (staging environment) inda za ka iya gwada aikace‑aikacen samarwa tare da irin wannan maɓallin API, kana ƙara sababbin matani kafin a sanya su raye. Wannan zai hana kowa kowa satar sirrin maɓallin API ɗinka, kuma zai iya sa aikin fassarar ka ya cika da yawa ta hanyar ƙara sababbin matani 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!