Mafi kyawun mafita don sanya aikace-aikacen Next.js su dace da harsuna daban-daban (i18n)

Yadda yake aiki

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

A cikin wannan darasin, za mu bincika yadda ake ƙara internationalization zuwa aikace-aikacen React Next.js ɗinka, tare da nunawa a ɓangaren uwar garke. TL;DR: Duba cikakken misali anan.

Wannan jagora ne ga 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 damar amfani da yawa na harsuna a cikin aikace-aikacen Next.js ɗinku, za mu fara da zaɓar ɗakin karatu na i18n. Akwai ɗimbin shahararrun ɗakunan karatu, ciki har da next-intl. Koyaya, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutunku ta atomatik zuwa kowace harshe ta amfani da AI na zamani, kuma yana 'yantar da ku daga aikin sarrafa fayilolin JSON masu wahala.

Bari mu girka shi ta amfani da npm a cikin tashar umarninku:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kuka shigar da module, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate, aikin fassara, da maɓallan API da suka dace. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ku ƙara katin kiredit.

A cikin UI na aikace‑aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ku je shafin makullin API ɗinsa. Ƙirƙiri maɓalli guda ɗaya read da maɓalli guda ɗaya read/write. Za mu ajiye su a matsayin canje‑canjen muhalli. Maɓallin read shine abin da muke kira public, kuma maɓallin read/write shine 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 cewa kada ku taba fallasa sirrin read/write mabudin API ga yanayin samarwa a ɓangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren madadin ta tsoho. A cikin wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folder” inda za a adana rubutunku, kamar URL na gidan yanar gizonku. Kara karanta game da tushen anan.

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

Mataki na 3: Saita TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar wani client ta amfani da makullin 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 sake amfani da shi daga baya. Yanzu, ta amfani da wani keɓaɓɓen /pages/_app.tsx, za mu ƙara mai ba 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 keɓaɓɓun pageProps da _app.tsx, da fatan za ku faɗaɗa ma'anarsu tare da siffofi da lambar da ke sama.

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

TacoTranslate yana ba da damar yin nunin fassarorinku daga bangaren uwar garke. Wannan yana ƙara inganta kwarewar mai amfani ta hanyar nuna abun da aka fassara nan take, maimakon fitowar ɗan gajeren lokaci na abun da bai fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a bangaren abokin ciniki, saboda tuni muna da duk fassarorin da muke buƙata.

Za mu fara ta hanyar ƙirƙirar 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 maballin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko na tsarawa (isProduction is false), za mu yi amfani da sirrin maballin API na read/write don tabbatar da cewa ana aika sabbin kirtani don fassara.

Har zuwa yanzu, mun saita aikace‑aikacen Next.js ne kawai tare da jerin harsunan da ake goyon baya. Abu na gaba da za mu yi shi ne ɗauko fassarori don duk shafukanku. Don yin hakan, za ku yi amfani ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps gwargwadon bukatunku.

Waɗannan ayyukan suna ɗaukar hujjoji uku: ɗaya Next.js Static Props Context abu, saitin TacoTranslate, da zaɓaɓɓun kadarorin Next.js. 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 cikin shafi, mu ce 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!"/>;
}

Yanzu ya kamata ku sami damar amfani da Translate sashen don fassara rubutun a cikin dukkan abubuwan React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Kaddamar da shi kuma gwada!

Mun gama! Aikace-aikacen Next.js ɗinku yanzu za a fassara shi ta atomatik idan kun ƙara kowane rubutu a cikin Translate component. Lura cewa kawai muhallin da ke da izinin read/write a kan maɓallin API ne 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 ku na samarwa tare da irin wannan maɓallin API, sannan ku ƙara sababbin rubutu kafin a sanya shi a rayuwa. Wannan zai hana kowa kowa sata maɓallin API ɗin sirrinku, kuma yana iya sa aikin fassarar ku ya yi yawa ta hanyar ƙara sababbin 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!