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

Yayinda duniya ke kara zama ta duniya baki daya, yana da muhimmanci sosai ga masu haɓaka yanar gizo su ƙirƙiri aikace-aikace da za su iya ba da damar masu amfani daga ƙasashe da al'adu daban-daban. Daya daga cikin hanyoyin muhimman da za a cimma wannan shi ne ta hanyar internationalization (i18n), wanda yake ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, kudade, da tsarin kwanaki.

A cikin wannan labarin, za mu bincika yadda ake ƙara internationalization zuwa aikace-aikacenka na React Next.js, 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 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 rubutunku ta atomatik zuwa kowane harshe ta amfani da fasahar AI ta zamani, kuma yana kubutar da ku daga wahalar sarrafa fayilolin JSON.

Mu girka shi ta amfani da npm a cikin tashar ku:

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 makullin API da suka dace. Ƙirƙiri asusu anan. Yana da kyauta, kuma ba ya buƙatar ka ƙara kati na bashi.

A cikin UI na manhajar TacoTranslate, ƙirƙiri wani aikin, sannan ka je shafin maballan API ɗinsa. Ƙirƙiri maɓalli ɗaya na read, da kuma maɓalli ɗaya na read/write. Za mu adana su a matsayin masu canjin yanayi (environment variables). Maɓallin read shi ake kira public, kuma maɓallin read/write shi ne secret. Misali, zaka iya ƙara su cikin fayil ɗin .env a babban fayil na aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ka tabbata kada ka taba fallasa sirrin read/write API key ga muhalli na samarwa na bangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yanki na tsoho idan ba a sami fassara ba. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folda” inda za a adana jimlolin ku, kamar adireshin URL na gidan yanar gizon ku. Kara karantawa game da tushen nan.

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

Mataki na 3: Saitin TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, kuna buƙatar ƙirƙirar abokin ciniki ta amfani da maɓallan 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 a ƙayyade TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki cikin fayil daban yana sauƙaƙa amfani da shi nan gaba. getLocales kawai wani aikin taimako ne tare da ɗan sarrafa kuskure da aka haɗa. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu 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 bada mahallin yanzu a shirye, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, tushen shimfidar a aikace-aikacenmu. Lura cewa wannan hanya tana da babban fayil da ke amfani da Dynamic Routes, inda [locale] shine sigar 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 ya kamata a lura anan shi ne muna amfani da Dynamic Route ma'auninmu [locale] don karɓar fassarar wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa duk lambobin yare da kuka kunna don aikin ku an riga an shirya su.

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 faɗakar da Next.js don sake ginawa shafin bayan da sakan 60 suka wuce, kuma ya kiyaye fassarar ku tana sabuwa a kowane lokaci.

Mataki na 4: Aiwhatan fassarar bangaren uwar garke

TacoTranslate yana tallafawa server side rendering. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan da nan, maimakon fara da nunin abun ciki da ba a fassara ba. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a ɓangaren abokin ciniki, saboda tuni mun sami fassarar da muke buƙata don shafin da mai amfani ke kallo.

Don kafa 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 matakin gwaji (isProduction is false), za mu yi amfani da mabuɗin API na sirri read/write don tabbatar da cewa ana aika sabbin kalmomi don fassara.

Don tabbatar da cewa aikin tura hanya da maido yana 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 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 ka saita matcher daidai da takardun Middleware na Next.js.

A kan abokin ciniki, za ka iya canza kukis ɗin locale don canza yaren da mai amfani yake so. Da fatan za a ga cikakken misalin lambar don samun ra'ayoyi akan yadda ake yin wannan!

Mataki na 5: Aika kuma gwada!

Mun gama! Aikace-aikacen React ɗinka yanzu zai fassara ta atomatik lokacin da ka ƙara kowace igiyar rubutu a cikin wani Translate sashi. Lura cewa kawai yanayi tare da izinin read/write a kan mabuɗin API ne za su iya ƙirƙirar sabbin igiyoyi don fassara. Muna ba da shawarar samun yanayi na gwaji mai rufe da aminci inda zaka iya gwada aikace-aikacen samarwa naka tare da irin wannan mabuɗin API, ƙara sabbin igiyoyi kafin ka saita shi kai tsaye. Wannan zai hana kowa satar mabuɗin API ɗinka na sirri, kuma zai hana yiwuwar cika aikin fassarar ka ta hanyar ƙara sabbin igiyoyi da ba su da alaka.

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

TacoTranslate na ba ka damar yin rajistar aikace-aikacen React naka cikin sauri ta atomatik zuwa kowace harshe da kuma daga kowace harshe. Fara yau!