Yadda ake aiwatar da ƙa'idojin duniya a cikin aikace-aikacen Next.js wanda ke amfani da Pages Router

Yayinda duniya ke kara zama ta kasa da kasa, yana kara zama dole 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. Daya daga cikin manyan hanyoyin cimma wannan shi ne ta hanyar [[internationalization (i18n)]], wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna, kuɗi, da tsarin kwanakin daban-daban.

A wannan koyarwar, za mu bincika yadda ake ƙara internationalization a cikin aikace-aikacenka na React Next.js, tare da server side rendering. TL;DR: Duba cikakken misali 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 ƙasashen duniya (internationalization) 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. Duk da haka, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara strings ɗinku kai tsaye zuwa kowace harshe ta amfani da fasahar AI mai tasowa, kuma yana ‘yantar da ku daga wahalar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka shigar da module ɗin, lokaci yayi da za ka ƙirƙiri asusun TacoTranslate ɗinka, wani aikin fassara, da mabuɗan API da suka dace. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka saka kati na kuɗi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka je shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli ɗaya read , da kuma maɓalli ɗaya read/write. Za mu adana su azaman muhallin canje-canje. Maɓallin read shine abin da muke kira public kuma maɓallin read/write shine secret. Alal misali, za ka iya ƙara su a cikin fayil .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar cewa kada ka taba fitarda sirrin maɓallin API na read/write zuwa yanayin samarwa na gefen abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren da za a koma kai tsaye. A wannan misalin, za mu saita shi zuwa en don Ingilishi.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a adana jumlar ku, kamar adireshin URL na gidan yanar gizon ku. Kara karantawa game da tushe anan.

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

Mataki na 3: Sanya TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, kuna buƙatar ƙirƙirar abokin ciniki ta amfani da maɓallan API daga 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 kasance muna ayyana TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin fayil mai zaman kansa yana sa ya fi sauƙin amfani daga baya. Yanzu, ta amfani da 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 kuna da na al'ada pageProps da _app.tsx, don Allah ku faɗaɗa ma’anar tare da dukiya da lambar da ke sama.

Mataki na 4: Aiwhatar da rendering a gefen uwar garke

TacoTranslate yana ba da damar yin fassarar ɓangaren uwar garke na fassarar ku. Wannan yana ƙara inganta ƙwarewar mai amfani ta hanyar nuna abun cikin da aka fassara nan da nan, maimakon fara da wani ɗan hazo na abun cikin da ba a fassara ba. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda muna da dukkan fassarorin da muke buƙata tuni.

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 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 saita aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake goyan 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 bisa ga bukatun ku.

Wadannan ayyukan suna ɗaukar hujjoji guda uku: Ɗaya Next.js Static Props Context abu, saitin don TacoTranslate, da zaɓaɓɓun kayan aikin Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 da tsoho, don haka fassarar ku ta kasance sabunta lokaci.

Don amfani da kowanne daga cikin ayyukan a cikin shafi, bari 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 sashin don fassara rubutu a cikin dukkan sassan React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Tura kuma gwada!

Mun gama! Aikace-aikacen React ɗinku yanzu zai fassara ta atomatik lokacin da kuka ƙara kowace magana a cikin Translate sashi. Lura cewa yanayin da ke da izinin read/write a kan maɓallin API kawai ne zai iya ƙirƙirar sabbin maganganu don fassara. Muna ba da shawarar samun yanayin gwaji na rufaffiyar da tsaro wanda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, kuna ƙara sabbin maganganu kafin a tura shi kai tsaye. Wannan zai hana kowa satar maɓallin API ɗinku na ɓoye, kuma yuwuwar cike aikin fassarar ku da sabbin maganganu marasa alaƙa.

Tabbatar ka duba cikakken misali a kan bayanin mu na GitHub. A can, za ka kuma sami misali na yadda ake yin wannan ta amfani da App Router! Idan ka fuskanci wata matsala, kada ka yi jinkirin tuntubar mu, kuma za mu kasance cikin farin ciki mu taimaka.

TacoTranslate yana ba ka damar yin kammalallen fassara na aikace-aikacen React naka cikin sauri daga da zuwa fiye da harsuna 75. Fara yau!