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

Yayinda duniya ke kara haɗa kai, yana da muhimmanci sosai 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 shine ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa cikin harsuna, kuɗi, da tsarin kwanaki daban-daban.

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

Wannan jagora yana don 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 internationalization 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 na fassara rubutunku ta atomatik zuwa kowace harshe ta amfani da fasahar AI ta zamani, kuma yana 'yantar da ku daga wahalar sarrafa fayilolin JSON.

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

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate na kyauta

Yanzu da ka girka wannan module ɗin, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate ɗinka, wani aikin fassara, da maɓallan API da suka haɗa. Ƙirƙiri asusu anan. Yana da kyauta, kuma ba ya buƙatar ka saka kati na bashi.

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 kuma maɓalli ɗaya na read/write. Za mu adana su a matsayin sauya-tsarin muhalli. Maɓallin read shi ne abin da muke kira public, kuma maɓallin read/write shi ne secret. Alal 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 da cewa ba za ka taba bayyana sirrin read/write mabudin API ga yanayin samar da ɓangaren abokin ciniki ba.

Za mu kuma ƙara wasu ƙarin ƙayyadaddun muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yankin da za a koma kai tsaye. A wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Jaka” inda za a adana kalmominku, kamar adireshin URL na gidan yanar gizonku. Karanta ƙarin bayani game da asalinsu anan.

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

Mataki na 3: Saita TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 riga an bayyana TACOTRANSLATE_API_KEY da TACOTRANSLATE_PROJECT_LOCALE nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin fayil daban yana sauƙaƙa sake amfani daga baya. getLocales ne kawai wani aiki mai amfani tare da wasu ginannen kuskuren sarrafawa. Yanzu, ƙirƙiri fayil mai suna /app/[locale]/tacotranslate.tsx, inda za mu aiwatar da mai ba da TacoTranslate mai ba da sabis ɗin.

'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 bangare ne na abokin ciniki.

Tare da mai ba da mahallin yanzu a shirye don tafiya, ƙirƙiri fayil mai suna /app/[locale]/layout.tsx, tushen shafin a aikace-aikacenmu. Lura cewa wannan hanyar tana da babban fayil ɗin da ke amfani da Dynamic Routes, inda [locale] shine sigar mai 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 namu [locale] don samo fassarar wannan yaren. Bugu da ƙari, generateStaticParams yana tabbatar da cewa duk lambobin harshe da kuka kunna don aikinku 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 sanar da Next.js ya sake gina shafin bayan dakika 60, kuma ya ci gaba da sabunta fassarar ku.

Mataki na 4: Aiwtar da gabatarwa a ɓangaren sabar

TacoTranslate yana goyan bayan saƙon ɓangaren uwar garke. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan da nan, maimakon ganin ɗan gajeren agogon abun cikin da ba a fassara ba da farko. Bugu da ƙari, za mu iya kauce wa buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda muna da fassarorin da muke buƙata don shafin da mai amfani ke kallo.

Don saitawa ƴan wasan uwar garken gefe, ƙ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 dubawar isProduction don dacewa da saitin ka. Idan true, TacoTranslate zai fito da maɓallin API na jama'a. Idan muna cikin gida, gwaji, ko yanayin tsari (isProduction is false), za mu yi amfani da maɓallin sirri read/write API don tabbatar da cewa an aika sabbin igiyoyi don fassara.

Don tabbatar da cewa tsarin hanya da mayar da hankali suna aiki yadda ake tsammani, 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 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 bisa ga docs na Next.js Middleware.

A bangaren abokin ciniki, za ka iya canza locale cookie don sauya yaren da mai amfani ya fi so. Don Allah a duba cikakken misalin lambar don samun ra’ayin yadda ake yin wannan!

Mataki na 5: Aika kuma gwada!

Mun gama! Aikace-aikacen React dinka zai riga ya fassara ta atomatik lokacin da ka ƙara kowace irin rubutu a cikin Translate component. Lura cewa yanayi ne kawai da ke da izinin read/write a kan API key ne za su iya ƙirƙirar sababbin rubutu don fassara. Muna ba da shawarar ka sami muhalli na gwaji wanda aka rufe kuma aka tsare sosai inda zaka iya gwada aikace-aikacen ka na samarwa tare da irin wannan API key, ƙara sababbin rubutu kafin ka fara amfani da shi a fili. Wannan zai hana kowa sata API key ɗinka sirri, kuma yana iya hana cunkoso a cikin aikin fassara ta hanyar ƙara sababbin rubutu marasa alaƙa.

Ka tabbata ka duba cikakken misali a cikin bayananmu na GitHub. A can, za ka kuma sami misali na yadda ake yin wannan ta amfani da Pages Router! Idan ka fuskanci wata matsala, kar ka ji tsoron tuntubar mu, za mu yi farin cikin taimakawa.

TacoTranslate yana ba ka damar fassara aikace-aikacen React ɗinka ta atomatik cikin sauri zuwa ko daga kowace harshe. Fara yau!