Mafi kyawun mafita don ƙasashen duniya (i18n) cikin Next.js apps

Yadda yake aiki

Yayinda duniya ke kara zama ta hanyar hada kowa da kowa, yana da muhimmanci ga masu haɓaka yanar gizo su gina aikace-aikace da za su iya bauta wa masu amfani daga ƙasashe da al’adu daban-daban. Daya daga cikin manyan hanyoyin cimma wannan shine ta hanyar internationalization (i18n), wanda yake baka damar daidaita aikace-aikacenka ga harsuna daban-daban, kudade, da tsarin kwanaki.

A cikin wannan darasin, za mu bincika yadda ake ƙara internationalization cikin aikace-aikacen React Next.js ɗinka, 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 ku duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da internationalization a cikin aikace-aikacen Next.js ɗinka, 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 na fassara kalmomin ka ta atomatik zuwa kowace harshe ta amfani da AI mai zamani, kuma yana 'yantar da kai daga wahalar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka shigar da ƙarin kayan aikin, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate naka, aikin fassara, da kuma maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka ƙara kati na bashi.

A cikin ƙirar aikace-aikacen TacoTranslate, ƙirƙiri aikin, kuma kewaya zuwa shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli ɗaya na read, da kuma maɓalli ɗaya na read/write. Za mu ajiye su a matsayin canje-canje na muhalli. Maɓallin read shi ne abin da muke kira public kuma maɓallin read/write shi ne secret. Misali, za ka iya ƙara su cikin fayil ɗin .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar da cewa kada ka taɓa saki sirrin read/write API key zuwa yanayin samarwa na ɓangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yare ta tsoho da za a koma gare ta. A cikin wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: "Jaka" inda za a adana mga rubutunka, kamar adireshin URL na gidan yanar gizonka. Karanta ƙarin bayani game da tushen nan.

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

Mataki na 3: Saitin TacoTranslate

Don haɗa TacoTranslate da aikace-aikacen ku, za ku buƙaci ƙ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 ƙaddara TACOTRANSLATE_API_KEY ta atomatik ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa amfani da shi a gaba. Yanzu, ta amfani da na 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 fadada ma’anar tare da kayan aiki da lambar da ke sama.

Mataki na 4: Aiwtar da fassarar ɓangaren uwar garke

TacoTranslate yana ba da damar yin rendering na fassarar ku a bangaren uwar garke. Wannan yana ƙara inganta ƙwarewar mai amfani ta hanyar nuna abun cikin da aka fassara nan da nan, maimakon fara da nunin abun ciki da bai fassaru ba. Bugu da kari, za mu iya tsallake buƙatun hanyar sadarwa a bangaren abokin ciniki, saboda mun riga mun samu duk fassarorin da muke bukata.

Za mu fara ta hanyar ƙ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 ƙirƙiri aikace-aikacen Next.js tare da jerin harsunan da aka tallafawa kawai. Abu na gaba da za mu yi shi ne ɗaukar fassarar dukkan shafukan ku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatunku.

Wannan ayyukan suna ɗaukar hujjoji guda uku: Ɗaya Next.js Static Props Context abu, saiti na TacoTranslate, da zaɓaɓɓun halaye na Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 a tsoho, don haka fassarar ku ta kasance sabuntacce.

Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, bari mu ɗauka kana 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 ɓangaren don fassara jumloli a cikin dukkanin kayan aikin React ɗinku.

import {Translate} from 'tacotranslate/react';

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

Mataki na 5: Bayar da gwaji!

Mun gama! Yanzu aikace-aikacenku na Next.js zai fassara kansa ta atomatik lokacin da kuka ƙara kowace kirtani a cikin Translate bangare. Lura cewa kawai yanayi masu izinin read/write akan maɓallin API za su iya ƙirƙirar sabbin kirtani don a fassara. Muna ba da shawarar samun yanayin gwaji na musamman kuma mai tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, ta ƙara sabbin kirtani kafin a fitar da shi kai tsaye. Wannan zai hana kowa satar maɓallin API ɗinku na sirri, kuma yana iya hana cika aikin fassarar ku ta hanyar ƙara sabbin kirtani waɗanda ba su da 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!