Yadda ake aiwatar da tallafin harsuna a cikin aikace-aikacen Next.js da ke amfani da App Router

Yayinda duniya ke ƙara haɗa kai, ya zama wajibi 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 muhimman hanyoyin cimma hakan 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 za a ƙara internationalization a cikin aikace-aikacen React Next.js ɗinka, tare da nunawa a ɓangaren uwar garken (server-side rendering). TL;DR: Ga cikakken misali a nan.

Wannan jagora yana nufin aikace-aikacen Next.js waɗanda 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 internationalization (i18n) a cikin aikace-aikacen Next.js ɗinka, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗakunan karatu da dama masu shahara, ciki har da next-intl. A cikin wannan misalin, duk da haka, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutunku ta atomatik zuwa kowace harshe ta amfani da AI na zamani, kuma yana 'yantar da ku daga aikin gajiya na 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 girka module ɗin, lokaci ya yi da za ku ƙirƙiri asusun TacoTranslate, aikin fassara, da makullin API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ku saka katin bashi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ku je shafin maɓallan API. Ƙirƙiri maɓalli ɗaya na read da ɗ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 ku iya ƙara su cikin fayil .env a tushen aikin ku.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada a fallasa mabuɗin API na sirri read/write a cikin 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 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” inda za a adana rubutun ku, 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: Saitawa TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar wani client 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 bayyana TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa sake amfani da shi daga baya. getLocales kawai aikin taimako ne tare 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 wani bangare ne na abokin ciniki.

Yanzu da mai ba da mahallin ya shirya, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, tsarin tushen a cikin aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil da ke amfani da Dynamic Routes, inda [locale] shi ne sigar da ke 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 Dynamic Route [locale] don ɗauko fassarorin wannan harshe. Bugu da ƙari, generateStaticParams yana tabbatar da cewa an riga an gina duk lambobin yaren da kuka kunna a cikin aikin ku.

Yanzu, bari 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 ci gaba da sabunta fassararku.

Mataki na 4: Aiwatar da nunin a gefen uwar garke

TacoTranslate yana tallafawa aiwatarwa a gefen uwar garke (server-side rendering). Wannan yana ƙwarai inganta kwarewar mai amfani ta hanyar nuna abun da aka fassara nan take, maimakon bayyana gajeren lokaci na abun da ba a fassara ba a farko. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a gefen abokin ciniki (client), saboda tuni muna da fassarorin da muke buƙata don shafin da mai amfani ke kallo.

Don saita rendering na ɓ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 duba isProduction don dacewa da saitin ku. Idan true, TacoTranslate zai bayyana mabuɗin API na jama'a. Idan muna cikin muhalli na gida, gwaji, ko staging (isProduction is false), za mu yi amfani da mabuɗin API na sirri read/write don tabbatar da an aika sababbin rubutu don fassara.

Don tabbatar 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 shafuka da aka nuna 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 an saita matcher bisa ga Takaddun Middleware na Next.js.

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

Mataki na 5: Tura kuma gwada!

Mun gama! Aikace-aikacen React ɗinku yanzu za a fassara ta atomatik lokacin da kuka ƙara kowane rubutu zuwa Translate bangare. Lura cewa kawai muhallin da ke da izinin read/write a kan maɓallin API zai iya ƙirƙirar sabbin rubutu da za a fassara. Muna ba da shawarar ku sami rufaffi kuma amintaccen muhalli na gwaji (staging) inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, kuna ƙara sabbin rubutu kafin ku tafi kai tsaye. Wannan zai hana kowa satar sirrin maɓallin API ɗinku, kuma zai rage yiwuwar cika aikin fassarar ku 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 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!