Yadda ake aiwatar da tsarin ƙasa-da-kasa (internationalization) a cikin aikace-aikacen Next.js da ke amfani da App Router

Yayin da duniya ke ƙara haɗa kai, yana da muhimmanci ga masu haɓaka yanar gizo su gina aikace-aikace da za su iya biyan buƙatun 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 daban-daban, nau'ikan kuɗi, da tsarin kwanan wata.

A cikin wannan labarin, za mu bincika yadda ake ƙara internationalization ga aikace-aikacen React Next.js ɗinku, tare da server side rendering. TL;DR: Duba cikakken misalin anan.

Wannan jagora ne don aikace-aikacen Next.js da ke amfani da App Router.
Idan kuna amfani da Pages Router, duba wannan jagora maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

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

TacoTranslate yana fassara rubutunka ta atomatik zuwa kowace harshe ta amfani da fasahar AI mafi ci gaba, kuma yana 'yantar da kai daga wahalar sarrafa fayilolin JSON.

Bari mu girka shi ta amfani da npm a cikin terminal ɗinka:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da kun shigar da module ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate, wani aikin fassara, da makullin API masu alaƙa. Ƙirƙiri asusun a nan. Kyauta ne, kuma ba ya buƙatar ku saka katin kiredit.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka je shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli guda read, da maɓalli guda read/write. Za mu adana su azaman muhallin yanayi (environment variables). Maɓallin read shi ne abin da muke kira public, kuma maɓallin read/write shi ne secret. Misali, za ku iya ƙara su cikin fayil na .env a cikin tushen aikin ku.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar cewa kada ku taba fallasa sirrin mabuɗin API read/write a cikin yanayin samarwa na ɓangaren abokin ciniki.

Za mu kuma ƙara wasu ƙarin sauye-sauyen muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren madadin ta tsoho. A cikin wannan misalin, za mu sa ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folda” inda za a adana rubutunku, misali URL na rukunin yanar gizonku. Karanta ƙarin bayani game da 'origins' anan.

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

Mataki na 3: Kafa TacoTranslate

Don haɗa TacoTranslate cikin aikace-aikacenku, za ku buƙaci ƙirƙirar client ta amfani da makullin 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 TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE ta atomatik 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 tare da wasu hanyoyin sarrafa kuskure da aka gina a 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 sashi ne na abokin ciniki.

Yanzu da mai bayar da mahallin ya shirya, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, ginshiƙin tsarin shafin a aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil da ke amfani da Dynamic Routes, inda [locale] shine sigar 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'aunin Dynamic Route ɗinmu, [locale], don samo fassarorin wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa duk lambobin yaren da kuka kunna a aikin ku an riga an gina su.

Yanzu, bari mu gina shafinmu na farko! Ƙirƙiri wani 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 daƙiƙa 60, kuma ya ci gaba da sabunta fassarar ku.

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

TacoTranslate yana tallafawa nunin shafi a ɓangaren uwar garke. Wannan yana matuƙar inganta ƙwarewar mai amfani ta hanyar nuna abubuwan da aka fassara nan take, maimakon ganin gajeriyar nunin abubuwan da ba a fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a gefen abokin ciniki, domin tuni muna da fassarorin da muke buƙata don shafin da mai amfani yake kallo.

Don saita nunin ɓangaren uwar garke, ƙirƙiri 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 mabuɗin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko na staging (isProduction is false), za mu yi amfani da mabuɗin API na sirri read/write don tabbatar da cewa an aika sabbin rubutu don fassara.

Don tabbatar da cewa routing da redirection suna aiki kamar 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 shafuka da aka gabatar a cikin yaren 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 kun saita matcher daidai da takaddun Middleware na Next.js.

A ɓangaren abokin ciniki, za ku iya canza kukin locale don sauya harshen da mai amfani ya fi so. Don ra'ayoyi kan yadda ake yin haka, duba cikakken misalin lambar!

Mataki na 5: Kaddamar da shi kuma gwada!

Mun kammala! Aikace-aikacen React ɗinku za a fassara ta atomatik yanzu lokacin da kuka ƙara kowane rubutu zuwa Translate component. Lura cewa kawai muhallin da ke da izinin read/write akan maɓallin API ne zai iya ƙirƙirar sabbin rubutu don a fassara. Muna ba da shawarar a sami muhallin staging na rufe kuma mai tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, kuna ƙara sabbin rubutu kafin ku kaddamar da shi. Wannan zai hana kowa satar maɓallin API ɗinku na sirri, kuma zai hana yiwuwar cika aikin fassarar ku da 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 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!