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

Yayinda duniya ke kara zama ta duniya baki daya, ya zama da muhimmanci ga masu haɓaka yanar gizo su gina aikace-aikace da za su iya ba wa masu amfani daga kasashe da al'adu daban-daban damar amfani. Daya daga cikin manyan hanyoyin cimma wannan shine ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, kudade, da nau'ikan kwanakin.

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

Wannan jagora na nufin aikace-aikacen Next.js ne 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 internationalization cikin aikace-aikacen Next.js dinka, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗimbin ɗakunan karatu masu shahara, ciki har da next-intl. A wannan misalin, duk da haka, za mu kasance muna amfani da TacoTranslate.

TacoTranslate yana fassara layukan ku ta atomatik zuwa kowace harshe ta amfani da AI na zamani, kuma yana 'yantar da ku daga sarrafa fayilolin JSON masu wahala.

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

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 naka, wani aikin fassara, da kuma ƙarin maɓallan API da suka shafi wannan. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka ƙara kati na bashi ba.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka tafi zuwa taba maɓallan API ɗinsa. Ƙirƙiri maɓalli ɗaya na read, da kuma maɓalli ɗaya na read/write. Za mu ajiye su a matsayin mahallin muhalli (environment variables). Maɓallin read shi ne abin da muke kira public kuma maɓallin read/write shi ne secret. Misali, za ka iya ƙara su cikin fayil ɗin .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Za mu kuma ƙara wasu sigogin yanayi guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yare mai dawo da martani ta tsohuwa. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folder” inda za a adana kalmomin ku, kamar adireshin URL na gidan yanar gizon ku. Karanta ƙarin game da asali anan.

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

Mataki na 3: Saitin TacoTranslate

Domin haɗa TacoTranslate da aikace-aikacenku, kuna buƙatar ƙirƙirar wani abokin ciniki 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;

Zamu kasance muna taɓbatar da TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE nan ba da jimawa ba.

Ƙirƙirar abokin hulɗa (client) a cikin fayil daban yana sauƙaƙa sake amfani da shi daga baya. getLocales kawai wata aikin kayan amfani ce (utility function) tare da wasu hanyoyin sarrafa kuskure da aka haɗa a ciki. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu aiwatar da mai bada 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 shi ne ɓangaren abokin ciniki.

Tare da mai ba da mahallin yanzu a shirye don amfani, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, tushen tsarin a aikace-aikacen mu. Lura cewa wannan hanya tana da babban fayil wanda 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 a nan shi ne muna amfani da ma'aunin Dynamic Route ɗinmu na [locale] don ɗaukar fassarar wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa duk lambobin yare (locale codes) da kuka kunna don aikin ku an riga an ƙirƙira 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ƙiƙoƙi 60, kuma ya sa fassarar ku ta kasance sabuwa.

Mataki na 4: Aiwana nunin gefen uwar garke

TacoTranslate yana goyan bayan server side rendering. Wannan yana ƙara inganta ƙwarewar mai amfani ta hanyar nuna abun cikin da aka fassara nan da nan, maimakon farkon nunawa da abun ciki mara fassara. Bugu da ƙari, za mu iya tsallake buƙatun cibiyar sadarwa a kan mai amfani, saboda mun riga mun sami fassarorin da muke buƙata don shafin da mai amfani ke kallon sa.

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 ya dace da saitinka. Idan true, TacoTranslate zai bayyana maɓallin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko na gwaji (isProduction is false), za mu yi amfani da maɓallin API na sirri read/write don tabbatar da cewa sabbin kalmomi an aika su don fassara.

Don tabbatar da cewa hanyar jagora da jagorar maimaitawa 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 nuna cikin harshen 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 kan abokin ciniki, za ka iya canza kukin locale don sauya harshen da mai amfani ya fi so. Don Allah duba cikakken misalin lambar don samun ra'ayoyi kan yadda ake yin wannan!

Mataki na 5: Sanya ka gwada!

Mun gama! Aikace-aikacen React ɗinka zai fara fassara ta atomatik lokacin da ka ƙara kowanne ƙaƙƙarfan rubutu zuwa ga Translate ɓangare. Lura cewa ƙungiyoyi kawai masu izinin read/write akan maɓallin API ne za su iya ƙirƙirar sabbin ƙaƙƙarfan rubutu don fassara. Muna ba da shawarar ka sami yanayin gwaji mai tsaro kuma rufe inda zaka iya gwada aikace-aikacen samarwa naka tare da irin wannan maɓallin API, ƙara sabbin kalmomi kafin zuwa yanayin aiki. Wannan zai hana kowa sata sirrin maɓallin API ɗinka, kuma zai hana yiwuwar cunkoso ga aikin fassara naka ta hanyar ƙara sabbin kalmomi 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!