Yadda ake aiwatar da ƙa'idar fassara zuwa harsuna daban-daban (internationalization) a cikin aikace-aikacen Next.js wanda ke amfani da App Router

Yayinda duniya ke ƙara haɗa kai, yana ƙara zama dole ga masu haɓaka yanar gizo su gina aikace‑aikace waɗanda 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, nau'ikan kuɗi, da tsarin kwanaki daban‑daban.

A cikin wannan labarin, 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 jagora ne ga aikace-aikacen Next.js da ke amfani da App Router.
Idan kuna amfani da Pages Router, duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da tsarin fassarar ƙasa-ƙasa (i18n) a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatun i18n. Akwai ɗakunan karatu da dama da suka shahara, ciki har da next-intl. Amma a cikin wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana atomatik fassara rubutunku zuwa kowace harshe ta amfani da sabuwar fasahar AI, kuma yana kawar da wahalar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka girka module ɗin, lokaci ya yi don ƙirƙirar asusun TacoTranslate, aikin fassara, da makullin API masu alaƙa. Ƙirƙiri asusu a nan. Kyauta ne, kuma ba ya buƙatar saka katin kuɗi.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taba fallasa sirrin read/write mabudin API zuwa mahalli na samarwa na ɓangaren abokin ciniki.

Za mu kuma ƙara wasu ƙarin masu canji na muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren madadin ta tsoho. A wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folder” inda za a adana rubutunku, misali 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: Saita TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar abokin huldar ta amfani da maɓallan API da aka ambata 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Za mu ayyana ta atomatik TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE nan ba da jimawa ba.

Ƙirƙirar client a cikin wani fayil daban yana sauƙaƙa sake amfani da shi daga baya. getLocales kawai wani aikin taimako ne mai ɗauke da wasu hanyoyin sarrafa kuskure na ciki. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu aiwatar da mai samar da TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Lura da 'use client'; wanda ke nuna cewa wannan komponent ɗin abokin ciniki ne.

Yanzu da mai samar da mahallin ya shirya, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, wanda shi ne tushen tsarin shafi a cikin aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil da ke amfani da Dynamic Routes, inda [locale] shine sigar (parameter) mai canzawa.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Abu na farko da za a lura anan shi ne muna amfani da ma'auninmu na Dynamic Route [locale] don ɗauko fassarori na wannan yare. Bugu da ƙari, generateStaticParams yana tabbatar cewa duk lambobin yare da kuka kunna don aikin ku an riga an gina su.

Yanzu, mu gina shafinmu na farko! Ƙirƙiri fayil mai suna /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Lura da canjin revalidate wanda ke gaya wa Next.js ya sake gina shafin bayan sakan 60, kuma ya riƙa sabunta fassararku.

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

TacoTranslate yana goyon bayan nuni daga bangaren uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abubuwan da aka fassara nan take, maimakon fara da gajeren nunin abubuwan da ba a fassara ba. Haka kuma, za mu iya tsallake yin buƙatun hanyar sadarwa daga bangaren abokin ciniki, saboda tuni muna da fassarorin da muke buƙata don shafin da mai amfani ke kallo.

Don saita nuni daga bangaren uwar garke, kirkiro ko gyara /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Gyara gwajin isProduction don ya dace da saitinka. Idan true, TacoTranslate zai nuna maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko staging (isProduction is false), za mu yi amfani da sirrin read/write maɓallin API don tabbatar da cewa ana tura sabbin rubutu don fassara.

Don tabbatar da cewa routing da redirection suna aiki yadda ake tsammani, za mu buƙaci ƙirƙirar fayil mai suna /middleware.ts. Ta amfani da Middleware, za mu iya mayar da masu amfani zuwa shafukan da aka nuna a cikin harshen da suka fi so.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Tabbatar ka saita matcher bisa ga takardun Next.js Middleware.

A bangaren abokin ciniki, za ka iya canza kukin locale don canza yaren da mai amfani ya fi so. Don samun ra'ayoyi kan yadda ake yin wannan, duba cikakken misalin lambar!

Mataki na 5: Tura kuma gwada!

Mun gama! Aikace-aikacen React ɗinka yanzu za a fassara ta atomatik duk lokacin da ka ƙara kowace irin rubutu a cikin Translate sashi. Lura cewa muhallin da ke da izinin read/write kawai a kan maɓallin API ne zai iya ƙirƙirar sababbin rubutu da za a fassara. Muna ba da shawarar samun muhalli na gwaji da aka rufe kuma mai tsaro inda za ka iya gwada aikace-aikacenka na samarwa tare da irin wannan maɓallin API, kana ƙara sababbin rubutu kafin a sa shi a kan layi. Wannan zai hana kowa kowa daga satar maɓallin API ɗinka na asiri, kuma zai iya haifar da cunkoson aikin fassarar ku ta hanyar ƙara sababbin 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 Pages 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!