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

Yadda yake aiki

Yayinda duniya ke ƙara haɗa kan kasashe, yana ƙara zama dole ga masu haɓaka yanar gizo su gina aikace-aikacen da za su iya biyan bukatun 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'ikan 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 nunin a ɓangaren uwar garke. TL;DR: Ga cikakken misali anan.

Wannan jagora ga aikace-aikacen Next.js ne 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 maktabar i18n

Don sanya aikace-aikacen Next.js ɗinku ya dace da harsuna daban-daban, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗakunan karatu masu shahara da yawa, ciki har da next-intl. Duk da haka, a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara layukan rubutunku ta atomatik zuwa kowane yare ta amfani da ingantacciyar AI, kuma yana 'yantar da ku daga wahalar sarrafa fayilolin JSON.

Bari mu shigar da 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 ɗinku, wani aikin fassara, da maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Yana kyauta, kuma ba ya buƙatar ku saka katin bashi.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada a taɓa zubar da sirrin read/write maɓallin API a muhallin samar (production) na ɓangaren abokin ciniki.

Za mu kuma ƙara wasu maɓallan muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar locale ta tsoho da ake amfani da ita a matsayin madadin. A wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: "folder" ne inda za a adana rubutunku, 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 ta atomatik ayyana TACOTRANSLATE_API_KEY nan ba da jimawa ba.

Ƙirƙirar abokin ciniki (client) a cikin wani fayil daban yana sauƙaƙa sake amfani da shi 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 kun riga kuna da keɓaɓɓun pageProps da _app.tsx, da fatan za ku faɗaɗa ayyanarsu ta hanyar ƙara siffofi da lambar da ke sama.

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

TacoTranslate yana ba da damar yin rendering na fassarorinku a ɓangaren uwar-garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun da aka fassara nan take, maimakon gajeren ɗan lokaci na ganin abun da bai fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a gefen abokin ciniki, saboda tuni muna da duk fassarorin 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 gwajin isProduction don ya dace da saitinka. Idan true, TacoTranslate zai bayyana maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko staging (isProduction is false), za mu yi amfani da sirrin maɓallin API na read/write don tabbatar da cewa ana aika sabbin rubutun don fassara.

Har zuwa yanzu, mun saita aikace-aikacen Next.js ne kawai tare da jerin harsunan da ake tallafawa. Abu na gaba da za mu yi shi ne ɗauko fassarar duk shafukan ku. Domin yin haka, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatun ku.

Waɗannan ayyukan suna ɗaukar hujjoji guda uku: ɗaya Next.js Static Props Context abu, saitin (configuration) na TacoTranslate, da zaɓaɓɓun kaddarorin Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 ta tsohuwa, don haka fassarorinku za su kasance na yanzu.

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!"/>;
}

Ya kamata yanzu ku iya amfani da Translate sashin don fassara rubutun a cikin dukkanin abubuwan 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 ɗinku yanzu zai fassaru ta atomatik lokacin da kuka ƙara kowane rubutu zuwa ga Translate ɓangare. Lura cewa kawai muhallin da ke da izinin read/write a kan maɓallin API ne za su iya ƙirƙirar sabbin rubutu don a fassara. Muna ba da shawarar ku sami muhalli na gwaji mai rufe kuma mai tsaro inda za ku iya gwada aikace‑aikacen ku na samarwa tare da irin wannan maɓallin API, ku ƙara sabbin rubutu kafin ku tura shi a fili. Wannan zai hana kowa daga satar maɓallin API ɗinku na sirri, kuma zai iya sa aikin fassarar ku ya cika ta hanyar ƙara sabbin 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!