Yadda ake aiwatar da ƙasa da ƙasa a cikin aikace-aikacen Next.js da ke amfani da Pages Router

Yayinda duniya ke kara hade-hade, yana da muhimmanci ga masu haɓaka yanar gizo su ƙirƙiri aikace-aikace waɗanda zasu iya biyan bukatun masu amfani daga kasashe da al'adu daban-daban. Daya daga cikin manyan hanyoyin 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 ake ƙara internationalization zuwa aikace-aikacen React Next.js ɗinka, tare da server side rendering. TL;DR: Duba cikakken misali anan.

Wannan jagorar tana nufin aikace-aikacen Next.js waɗanda ke 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 don aiwatar da ƙasa da ƙasa a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗakunan karatu da dama da suka shahara, 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 mai ci gaba, kuma yana 'yantar da ku daga aikin sarrafa fayilolin JSON masu wahala.

Mu girka shi ta amfani da npm a cikin tashar umarninku:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka girka wannan module, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate naka, wani aikin fassara, da kuma maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Ba shi da kuɗi, kuma ba ya buƙatar ka saka kati na bashi.

A cikin UI na manhajar TacoTranslate, ƙirƙiri wani aikin, sannan ka matsa zuwa shafin makullin API ɗinsa. Ƙirƙiri ɗaya read makulli, da ɗaya read/write makulli. Za mu adana su a matsayin canje-canje na muhalli. Makullin read shine abin da muke kira public kuma makullin read/write shine secret. Misali, za ka iya ƙara su cikin wani fayil na .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taba saci sirrin maɓallin API na read/write zuwa yanayin samarwa na bangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren tsoho na madadin. A wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a adana jimlolin ku, kamar adireshin URL na gidan yanar gizon ku. Kara karantawa game da tushen a nan.

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

Mataki na 3: Kafa TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar abokin ciniki ta amfani da maɓallan API daga baya. Misali, ƙirƙiri wani 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 ƙayyade TACOTRANSLATE_API_KEY ta atomatik ba da daɗewa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa yin amfani da shi nan gaba. Yanzu, ta amfani da na musamman /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, da fatan za a faɗaɗa ƙayyadaddun tare da abubuwan da ke ciki da lambar daga sama.

Mataki na 4: Aiƙa fassarar ɓangaren uwar garke

TacoTranslate yana ba da damar yin fassarar ɓangaren uwar garke na fassarar ku. Wannan yana inganta ƙwarai ƙwarin ƙwarewar mai amfani ta hanyar nuna abubuwan da aka fassara nan take, maimakon fara da nuna bayanai marasa fassara. Haka kuma, za mu iya kauce wa buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda mun riga mun mallaki dukkan fassarorin da muke buƙata.

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

Gyara duba isProduction don dacewa da saitinka. Idan true, TacoTranslate zai nuna maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko gwaji na mataki (isProduction is false), za mu yi amfani da maɓallin API na sirri read/write don tabbatar da cewa ana aika sababbin kalmomi don fassara.

Har zuwa yanzu, mun kafa aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake goyon baya. Abu na gaba da za mu yi shi ne samo fassarar dukkan shafukan ku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps dangane da bukatunku.

Wadannan ayyuka suna daukar hujjoji guda uku: Abu guda Next.js Static Props Context, saitin don TacoTranslate, da zaɓaɓɓun kayan Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassarorinku su kasance sabunta.

Domin amfani da kowanne daga cikin ayyukan a shafi, mu dauka cewa kuna 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 ka iya amfani da Translate sashi don fassara rubutun cikin dukkanin abubuwan React ɗinka.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Kaddamarwa da gwaji!

Mun gama! Aikace-aikacen React ɗinku yanzu zai fassara ta atomatik lokacin da kuka ƙara kowace kirtani zuwa cikin Translate sashi. Lura cewa ƙungiyoyin aiki da suka sami izinin read/write a kan maɓallin API kawai za su iya ƙirƙirar sababbin kirtani don a fassara. Muna ba da shawarar ku sami muhalli na gwaji mai rufewa da tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, kuna ƙara sababbin kirtani kafin a fara amfani da shi akan layi. Wannan zai hana kowa satar sirrin maɓallin API ɗinku, kuma zai iya hana haɓaka aikin fassarar ku ta hanyar ƙara sababbin kirtani marasa alaƙa.

Tabbatar ka duba cikakken misali a shafinmu na GitHub. A can, za ka kuma sami misalin yadda ake yin wannan ta amfani da App Router! Idan ka samu wata matsala, kar ka yi shakka ka tuntube mu, za mu yi farin cikin taimakawa.

TacoTranslate yana ba ka damar yin ƙawancen harshen aikace-aikacen React dinka kai tsaye cikin sauri daga da zuwa fiye da harsuna 75. Fara yau!