Yadda ake aiwatar da internacionalization a cikin aikin Next.js wanda ke amfani da App Router

Yayin da duniya ke kara zama ta kowa da kowa, yana da muhimmanci 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. Ɗaya daga cikin mahimman hanyoyin cimma wannan shine ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa yaruka daban-daban, kudade, da tsarin kwanaki.

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 don 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 ƙasashen duniya a cikin aikace-aikacen Next.js ɗinku, 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 ƙamus ɗin ku kai tsaye zuwa kowace harshe ta amfani da AI mai ci gaba, kuma yana 'yantar da ku daga wahalar sarrafa fayilolin JSON.

Bari mu girka shi ta amfani da npm a tashar umarninku:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka shigar da wannan module, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate ɗinka, aikin fassara, da kuma maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka saka katin kuɗi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka tafi zuwa shafin maballan API ɗinsa. Ƙirƙiri maballi ɗaya na read, da maballi ɗaya na read/write. Za mu adana su a matsayin canje-canje na muhalli. Maballin read shine abin da muke kira public kuma maballin read/write shine secret. Misali, za ka iya ƙara su a cikin fayil na .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ku taɓa yawo da maɓallin sirri na read/write API zuwa yanayin samarwa na gefen abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren da ake amfani da shi a matsayin madadin tsoho. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a adana rubutunku, kamar URL na gidan yanar gizonku. Karanta ƙarin bayani game da asalai anan.

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

Mataki na 3: Saitin TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenka, za ka buƙaci ƙirƙirar abokin ciniki ta amfani da maballan API daga baya. Misali, ƙirƙiri fayil ɗin da ake kira /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 ƙayyade 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 amfani da shi daga baya. getLocales kawai wani aikin amfani ne tare da wasu abubuwan sarrafa kuskure da aka gina a ciki. Yanzu, ƙirƙiri wani fayil mai suna /app/[locale]/tacotranslate.tsx, inda zamuyi aiwatar da mai bayarwa na 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 ɓangare ne na abokin ciniki.

Tare da mai ba da mahallin yanzu a shirye don amfani, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, wanda shine tsarin tushen a cikin aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil mai amfani da Dynamic Routes, inda [locale] shine sigar dabam.

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 ya kamata a lura a nan shi ne muna amfani da Dynamic Route parameter [locale] don ɗaukar fassarar wannan yaren. Haka kuma, generateStaticParams yana tabbatar da cewa duk lambobin yare (locale codes) da kuka kunna don aikin ku an riga an yi musu pre-rendering.

Yanzu, bari mu gina shafi 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 revalidate canji wanda ke gaya wa Next.js don sake ginawa shafin bayan seconds 60, kuma ya ci gaba da sabunta fassarorin ku.

Mataki na 4: Aiwar da yin fassarar ɓangaren mai masaukin yanar gizo (server side rendering)

TacoTranslate yana goyon bayan fassarar ɓangaren uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan take, maimakon bayyana abun ciki da ba a fassara ba da farko. Bugu da ƙari, za mu iya tsallake buƙatun yanar gizo daga ɓangaren abokin ciniki, saboda mun riga mun sami fassarar da muke bukata don shafin da mai amfani ke kallo.

Don saita server side rendering, ƙ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 dubawa ta isProduction don dacewa da saitinka. Idan true, TacoTranslate zai bayyana mabuɗin API na jama'a. Idan muna cikin muhalli na gida, gwaji, ko na shiryawa (isProduction is false), za mu yi amfani da mabuɗin sirri na read/write don tabbatar da cewa sababbin kalmomi suna aikawa don fassara.

Don tabbatar da cewa tura hanya da mayar da martani suna aiki yadda ya kamata, 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 harshe 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 da saita matcher bisa ga Takaddun Middleware na Next.js.

A gefen abokin ciniki, za ka iya canza kuki locale don sauya yaren da mai amfani yake so. Don Allah duba cikakken misalin lambar don samun ra'ayoyi kan yadda za a yi wannan!

Mataki na 5: Sanya aikace-aikacen ka kuma gwada!

Mun gama! Aikace-aikacen React ɗinku zai kasance ana fassara shi ta atomatik lokacin da kuka ƙara kowane rubutu a cikin Translate ɓangare. Lura cewa yanayi kawai masu izinin read/write akan maɓallin API ne za su iya ƙirƙirar sababbin rubutu don a fassara. Muna ba da shawarar samun yanayin gwaji wanda aka rufe kuma aka tsare inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, ta haka za ku ƙara sababbin rubutu kafin ayi amfani da su kai tsaye. Wannan zai hana kowa ya sace maɓallin API ɗinku na sirri, kuma yana iya hana ƙarin cunkoso a cikin aikin fassararku ta hanyar ƙara sababbin rubutu da 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 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!