Mafi kyawun mafita don ƙasashen duniya (i18n) a cikin ƙaƙƙarfan manhajar Next.js

Yadda yake aiki

Yayinda duniya ke kara zama ta duniya daya, yana da muhimmanci sosai ga masu haɓaka yanar gizo su gina aikace-aikacen da za su iya kula da masu amfani daga kasashe da al’adu daban-daban. Daya daga cikin manyan hanyoyi don cimma wannan shine ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna, kudade, da tsarin kwanaki daban-daban.

A cikin wannan koyarwar, za mu bincika yadda za a ƙara internationalization ga aikace-aikacenka na React Next.js, tare da server side rendering. TL;DR: Duba cikakken misalin anan.

Wannan jagora yana nufin 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 ɗakunan karatu masu yawa da suka shahara, ciki har da next-intl. Duk da haka, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutun ku ta atomatik zuwa kowane yare ta amfani da AI na 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 kyauta

Yanzu da ka sanya wannan module ɗin, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate naka, wani aikin fassara, da kuma makullin API da suka dace. Ƙirƙiri asusu anan. Yana da kyauta, kuma bai buƙatar ka saka katin kuɗi ba.

A cikin tsarin aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, kuma ka je zuwa shafin maballan API ɗinsa. Ƙirƙiri mabuɗin read guda ɗaya, da mabuɗin read/write guda ɗaya. Za mu ajiye su a matsayin sauye-sauyen muhalli. Mabuɗin read shine abin da muke kira public, kuma mabuɗin read/write shine secret. Alal misali, zaka iya ƙara su a cikin fayil .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar da cewa kada ku taɓa bayyana sirrin maɓallin API read/write ga yanayin samar da abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar al'ada ta yare mai dawowa. A wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: "Fayil" inda za a adana jimlolin ku, kamar URL na gidan yanar gizonku. Karanta ƙarin game da asali a nan.

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

Mataki na 3: Kafa TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, kuna buƙatar ƙirƙirar abokin ciniki ta amfani da maɓallan API da aka bayar 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 yi wa TACOTRANSLATE_API_KEY ƙayyade kai tsaye nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa yin amfani da shi daga baya. Yanzu, ta amfani da musamman /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 pageProps na musamman da _app.tsx, da fatan za a faɗaɗa bayanin tare da ƙaddarorin da lambar daga sama.

Mataki na 4: Aiwar da nunin bangaren uwar garke

TacoTranslate yana ba da damar yin rendering na bangaren uwar garke na fassarar ku. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan take, maimakon bayyana abun ciki mara fassara kafin haka. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a ɓangaren abokin ciniki, saboda tuni muna da duk fassarar da muke buƙata.

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 sanya kawai jerin harsunan da ake goyan baya a cikin aikace-aikacen Next.js. Abin da za mu yi na gaba shi ne mu 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 TacoTranslate, da kuma wasu zaɓaɓɓun abubuwan Next.js. Lura cewa revalidate akan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassarar ku ta kasance sabunta.

Don amfani da kowanne daga cikin ayyukan 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 ku iya amfani da Translate bangare don fassara rubutattun bayanai a cikin dukkanin bangarorin React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Fitar da Gwaji!

Mun gama! Aikace-aikacen Next.js ɗinku yanzu za a fassara ta atomatik lokacin da kuka ƙara kowane igiyar rubutu zuwa Translate ƙungiya. Lura cewa yanayin da ke da izinin read/write akan maɓallin API kawai ne zai iya ƙirƙirar sabbin igiyoyi don fassara. Muna ba da shawarar ku sami mahalli na gwaji mai rufewa da tsaro inda zaku iya gwada aikace-aikacen samarwar ku tare da irin wannan maɓallin API, ku ƙara sabbin igiyoyi kafin a tura su a kai tsaye. Wannan zai hana kowa zamba da maɓallin API ɗin ku na sirri, kuma zai hana yiwuwar cika aikin fassarar ku ta hanyar ƙara sabbin igiyoyi marasa alaƙa.

Ka tabbata ka duba cikakken misalin a shafinmu na GitHub. A can, za ka kuma samu misali na yadda ake yin wannan ta amfani da App Router! Idan ka samu wata matsala, kar ka ji tsoron tuntuɓar mu, kuma za mu yi farin cikin taimaka maka.

TacoTranslate yana ba ka damar tsara aikace-aikacen React ɗinka cikin sauƙi daga kowace harshe zuwa wata. Fara yau!