Yadda ake aiwatar da ƙasa-ƙasa a cikin aikace-aikacen Next.js wanda ke amfani da App Router

Yayinda duniya ke kara zama ta duniya baki daya, yana kara zama muhimmanci ga masu haɓaka yanar gizo su gina aikace-aikace da zasu iya biyan bukatun masu amfani daga kasashe da al'adu daban-daban. Daya daga cikin manyan hanyoyin cimma wannan shine ta hanyar internationalization (i18n), wanda ke baka damar daidaita aikace-aikacenka zuwa harsuna, kudade, da tsarin kwanaki daban-daban.

A cikin wannan labarin, za mu bincika yadda ake kara internationalization a cikin aikace-aikacenka na React Next.js, tare da server side rendering. TL;DR: Duba cikakken misali anan.

Wannan jagorar tana nufin aikace-aikacen Next.js da ke amfani da App Router.
Idan kuna amfani da Pages Router, ku duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da ƙa'idojin kasa da kasa 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. Amma a wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara rubutunka ta atomatik zuwa kowane harshe ta amfani da AI na zamani, kuma yana 'yantar da kai daga gudanarwa mai wahala na fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka saka wannan ƙari, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate ɗinka, wani aikin fassara, da kuma maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Yana da kyauta, kuma bai buƙaci ka saka katin kuɗi ba.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar kada ka taɓa fallasa sirrin mabuɗin API na read/write ga yanayin samarwa na abokin ciniki.

Zamu ƙara wasu ƙarin abubuwan yanayi guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren da za a koma idan ba a samu ba ta tsohuwa. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jakarka” inda za a adana jimlolin ku, kamar adireshin URL na gidan yanar gizon ku. Kara karantawa 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 ciniki ta amfani da maballan 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Za mu yi ta atomatik ƙayyade TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin fayil ɗin daban yana sauƙaƙa yin amfani da shi a nan gaba. getLocales kawai aikin taimako ne tare da ɗan sarrafa kuskure a ciki. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu aiwatar da mai ba 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 ɓangaren abokin ciniki ne.

Tare da mai ba da mahallin yanzu a shirye don amfani, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, tushen tsarin a cikin aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil da ke amfani da Dynamic Routes, inda [locale] shine 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 sigar Dynamic Route ɗinmu [locale] don ɗaukar fassarorin don wannan yaren. Bugu da ƙari, generateStaticParams na tabbatar da cewa duk lambobin yare da ka kunna don aikin ka an riga an yi musu render.

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 yake gaya wa Next.js ya sake ginawa shafin bayan dakika 60, kuma ya kiyaye fassarar ku ta zama sabuwa.

Mataki na 4: Aiwhatar da fassarar bangaren uwar garke (server side rendering)

TacoTranslate yana tallafawa server side rendering. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun da aka fassara nan da nan, maimakon farko yin nunin abun da ba a fassara ba cikin ɗan gajeren lokaci. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a gefen abokin ciniki, saboda mun riga mun mallaki fassarar da muke buƙata don shafin da mai amfani ke kallo.

Don saita server side rendering, ƙirƙira 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 saitinka. Idan true, TacoTranslate zai nuna mabuɗin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko na gwaji (isProduction is false), za mu yi amfani da mabuɗin API na sirri read/write don tabbatar da an aika sababbin kalmomi don fassara.

Don tabbatar da cewa tsarin hanyar sadarwa da mayar da martani suna aiki kamar yadda ake tsammani, za mu buƙaci ƙirƙirar fayil mai suna /middleware.ts. Ta amfani da Middleware, za mu iya tura 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 da saita matcher bisa ga Takaddun Middleware na Next.js.

A bangaren abokin ciniki, zaka iya canza kukis na locale don sauya yaren da mai amfani yake so. Don Allah duba cikakken misalin lambar don samun ra'ayoyi kan yadda ake yin wannan!

Mataki na 5: Aika zuwa yanar gizo kuma gwada!

Mun gama! Aikace-aikacen React ɗinku zai fara fassara ta atomatik lokacin da kuka ƙara kowanne jerin kalmomi zuwa Translate component. Ku lura cewa kawai yanayi da ke da izinin read/write a kan maɓallin API za su iya ƙirƙirar sababbin jerin kalmomi don a fassara su. Muna ba da shawarar samun yanayin gwaji mai rufewa da tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, ku ƙara sabbin jerin kalmomi kafin ku tura shi cikin aiki. Wannan zai hana kowa sata maɓallin API ɗinku na sirri, kuma zai iya hana cunkoson aikin fassarar ku ta hanyar ƙara sabbin jerin kalmomi marasa nasaba.

Tabbatar da ka duba cikakken misalin a shafinmu na GitHub. A can, za ka kuma sami misali na yadda ake yin wannan ta amfani da Pages Router! Idan ka fuskanci kowace matsala, kar ka ji kunya ka tuntuɓe mu, kuma za mu yi farin cikin taimakawa.

TacoTranslate yana ba ka damar yin ƙwararren daidaita harsuna na aikace-aikacen React ɗinka cikin sauri zuwa kowace harshe da dawowa. Fara a yau!