Yadda ake aiwatar da ƙasashen duniya a cikin aikace-aikacen 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 manyan hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka ga harsuna, kudade, da tsarin kwanaki daban-daban.

A cikin wannan labarin, za mu binciko yadda ake ƙara internationalization a cikin React Next.js application ɗinka, tare da server side rendering. TL;DR: Duba cikakken misali anan.

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

Mataki na 1: Sanya ɗakin karatu na i18n

Don gudanar da ƙa'idar ƙasa-ƙasa a cikin aikace-aikacen Next.js ɗinku, da farko za mu zaɓi ɗakin karatu na i18n. Akwai ɗakunan karatu da yawa masu shahara, ciki har da next-intl. Amma a cikin wannan misali, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara ƙaƙƙarfan rubutunku ta atomatik zuwa kowane harshe ta amfani da AI na zamani, kuma yana 'yantar da ku daga wahalar gudanar da fayilolin JSON.

Mu shigar da shi ta amfani da npm a cikin tashar kwamfutarku:

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 asusunka na TacoTranslate, wani aikin fassara, da makullin API da suka danganta. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka saka kati na kuɗi.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ka je zuwa shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli ɗaya na read, da maɓalli ɗaya na read/write. Za mu ajiye su azaman canje-canje na muhalli. Maɓallin read shine abin da muke kira public, kuma maɓallin read/write shine 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 taɓa zubar da sirrin read/write API key zuwa muhalli na samarwa na ɓangaren abokin ciniki.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar ƙasar da aka zaɓa ta tsohuwa don koma baya. A cikin wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jakarka” inda za a adana ƙungiyoyin rubutunka, kamar adireshin URL na gidan yanar gizonka. Karanta ƙarin 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, za ku buƙaci ƙ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 mu kasance muna ta atomatik ƙayyade TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE nan ba da daɗewa 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 ƙuyarwar abokin ciniki ce.

Tare da mai ba da mahallin yanzu a shirye, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, wanda shine babban tsarin a aikace-aikacenmu. Lura cewa wannan hanyar 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 za a lura anan shi ne muna amfani da sigar Dynamic Route ɗinmu [locale] don ɗaukar fassarar wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa duk lambobin harshe da kuka kunna don aikin ku an shirya su a gaba.

Yanzu, bari mu gina shafinmu na farko! Ƙirƙiri wani 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 ya sake ginawa shafin bayan dakika 60, kuma ya ci gaba da sabunta fassarar ku.

Mataki na 4: Aiwtar da fassarar ɓangaren uwar garken

TacoTranslate yana tallafawa server side rendering. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun cikin da aka fassara nan take, maimakon fara da wani ɗan gajeren lokaci na abun cikin da ba a fassara ba. Bugu da ƙari, za mu iya tsallake buƙatun yanar gizo a ɓangaren abokin ciniki, saboda tuni muna da fassarar da muke buƙata don shafin da mai amfani ke kallon sa.

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 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 tsarin hanya da koma baya suna aiki yadda ake fata, 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 da su a 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 Takardun Middleware na Next.js.

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

Mataki na 5: Aika kuma gwada!

Mun gama! Aikace-aikacen React ɗinku yanzu zai kasance ana fassara shi ta atomatik lokacin da kuka ƙara kowanne igiyoyi zuwa wani Translate bangare. Ku lura cewa yanayi ne kawai da ke da izinin read/write akan maɓallin API za su iya ƙirƙirar sababbin igiyoyi don fassara. Muna ba da shawarar ku sami yanayi na gwaji da aka rufe kuma aka tabbatar inda za ku iya gwada aikace-aikacen samar da ku tare da irin wannan maɓallin API, ƙara sababbin igiyoyi kafin a fara amfani da shi. Wannan zai hana kowa satar maɓallin sirrin API ɗinku, kuma da yiwuwar hana yawa daga cikin aikin fassara ta hanyar ƙara sabbin igiyoyi 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!