Next.js යෙදුමක App Router භාවිතා කරන විට, ජාත්‍යන්තරීකරණය කෙසේ ක්‍රියාත්මක කළ යුතුද?

ලෝකය වඩාත් ගෝලීය වීමත් සමඟ, වෙනත් රටවල් සහ සංස්කෘතික පසුබැසි ඇති පරිශීලකයන්ට ගැලපෙන ආකාරයෙන් යෙදුම් නිර්මාණය කිරීම වෙබ් සංවර්ධකයින්ට වඩාත් වැදගත් වෙයි. මෙය සපුරාලීමට ප්‍රධාන ක්‍රමවලින් එක්කක් වන ජාත්යන්තරීකරණය (i18n) මඟින් ඔබට ඔබගේ යෙදුම විවිධ භාෂාවන්ට, මුදල් ක්‍රමවලට සහ දිනයේ ආකෘතිවලට ගැලපෙන ලෙස වෙනස් කළ හැකිය.

මේ ලිපියෙන් අපි සේවාදායක පැත්තේ ප්‍රදර්ශනය සමඟ ඔබගේ React Next.js යෙදුමට ජාත්යන්තරීකරණය එක් කිරීමේ ක්‍රම විමසා බලනවා. TL;DR: මෙහි සම්පූර්ණ උදාහරණය බලන්න.

මෙම මාර්ගෝපදේශය App Router භාවිතා කරන Next.js යෙදුම් සඳහායි.
ඔබ Pages Router භාවිතා කරනවා නම්, වෙනත් මාර්ගෝපදේශය බලන්න.

පියවර 1: i18n පුස්තකාලයක් ස්ථාපනය කරන්න

ඔබගේ Next.js යෙදුමට බහුභාෂා සහාය (i18n) ක්‍රියාත්මක කිරීමට, පළමුව අපි i18n පුස්තකාලයක් තෝරා ගන්නවා. පොදු ලෙස ජනප්‍රිය පුස්තකාල කිහිපයක් තිබේ, එවන් අතර next-intl ද ඇත. කෙසේ වෙතත් මෙම උදාහරණයේදී අපි TacoTranslate භාවිතා කරන්නෙමු.

TacoTranslate නවීන AI තාක්ෂණය භාවිතයෙන් ඔබගේ පෙළ ඕනෑම භාෂාවකට ස්වයංක්‍රීයව පරිවර්තනය කරයි, සහ JSON ගොනු කළමනාකරණයේ වෙහෙසදායක කටයුතු වලින් ඔබව නිදහස් කරයි.

මෙය ඔබගේ ටර්මිනල්හිදී npm භාවිතයෙන් ස්ථාපනය කරන්න:

npm install tacotranslate

පියවර 2: නොමිලේ TacoTranslate ගිණුමක් සාදන්න

මොඩියුලය ස්ථාපිත කරගෙන ඇති අතර, දැන් ඔබේ TacoTranslate ගිණුම, පරිවර්තන ව්‍යාපෘතිය හා ඒ සම්බන්ධ API යතුරු සාදන වෙලාවයි. මෙතැනින් ගිණුමක් සාදන්න. මෙය නොමිලේ වන අතර, ක්‍රෙඩිට් කාඩ්පතක් ඇතුළත් කිරීම අවශ්‍ය නැත.

TacoTranslate යෙදුම් UI තුළ ව්‍යාපෘතියක් සාදන්න සහ එහි API යතුරු ටැබයට යන්න. එක read යතුරක් සහ එක read/write යතුරක් සාදන්න. අප ඒවා පරිසර විචල්‍ය (environment variables) ලෙස සුරक्षित කරගන්නෙමු. read යතුර අපි public ලෙස හඳුන්වන අතර read/write යතුර secret ය. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබගේ ව්‍යාපෘතියේ මුල් ෆෝල්ඩරයේ .env ගොනුවට එකතු කළ හැක.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

රහසිම read/write API යතුර client-side නිෂ්පාදන පරිසරවලට කිසිවිටෙකත් හෙළි නොවන බවට වග බලා ගන්න.

අපි තවත් පරිසර විචල්‍ය දෙකක් එක් කරමු: TACOTRANSLATE_DEFAULT_LOCALE සහ TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: පෙරනිමි fallback දේශීය (locale) කේතය. මෙම උදාහරණයේදී, අපි එය ඉංග්‍රීසි සඳහා en ලෙස සකසනු ඇත.
• TACOTRANSLATE_ORIGIN: ඔබගේ පෙළ ගබඩා වන "ෆෝල්ඩර්" එක — උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ URL එක. ඔරිජින් පිළිබඳ වැඩි විස්තර මෙතැනින් කියවන්න.

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

පියවර 3: TacoTranslate පිහිටුවීම

TacoTranslate ඔබගේ යෙදුමට ඒකාබද්ධ කිරීමට, ඔබට පෙර ලබාදුන් API යතුරු භාවිතා කර client එකක් සාදා ගත යුතු වේ. උදාහරණයක් ලෙස, /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;

අපි ඉක්මනින් TACOTRANSLATE_API_KEY සහ TACOTRANSLATE_PROJECT_LOCALE ස්වයංක්‍රීයව නියම කරනු ඇත.

client එක වෙනම ගොනුවක නිර්මාණය කිරීමෙන් පසුව එය නැවත භාවිතයට ගැනීම පහසු වේ. getLocales යනු සමහර ඇතුළත් දෝෂ කළමනාකරණ ක්‍රියාවලියක් ඇති උපයෝගී (utility) ක්‍රියාවලියක් පමණි. දැන්, /app/[locale]/tacotranslate.tsx නම් ගොනුවක් සාදන්න, එහි අපි 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>
	);
}

මෙය client කොම්පෝනන්ට් එකක් බව පෙන්වන 'use client'; සලකුණු කරන්න.

context provider එක දැන් සූදානම් වූ බැවින්, අපගේ යෙදුමේ ප්‍රධාන layout එක වන /app/[locale]/layout.tsx නමින් ගොනුවක් තැනීම කරන්න. මෙම මාර්ගය Dynamic Routes භාවිතා කරන ෆෝල්ඩරයක් අඩංගු බව සලකන්න; එහි [locale] ගතික පරාමිතියකි.

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>
	);
}

මෙහි පළමුව සලකිය යුතු දේ වන්නේ අපි අපගේ Dynamic Route පරාමිතිය [locale] භාවිතා කරමින් එම භාෂාවට පරිවර්තන ලබා ගන්නේ යන්නයි. එමෙන්ම, generateStaticParams ඔබගේ ව්‍යාපෘතිය සඳහා සක්‍රීය කර ඇති සියලු locale කේත පෙර-රෙන්ඩර් වන බවට සහතික කරයි.

දැන් අපි අපේ පළමු පිටුව සාදමු! නමින් /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!" />
	);
}

Next.js ට පිටුව තත්පර 60කින් පසු නැවත ගොඩනැගීමට සහ ඔබගේ පරිවර්තන යාවත්කාලීනව තබා ගැනීමට කියන revalidate විචල්‍යය සලකන්න.

පියවර 4: සේවාදායක පැත්තේ රෙන්ඩරින් ක්‍රියාත්මක කිරීම

TacoTranslate සේවාදායක-පාර්ශව රෙන්ඩරින් සඳහා සහාය දක්වයි. මෙය පරිශීලක අත්දැකීම විශාල ලෙස වර්ධනය කරයි — මුලින් නොපරිවර්තිත අන්තර්ගතයක් කෙටි කාලයක් පෙන්වීම වෙනුවට පරිවර්තිත අන්තර්ගතය තත්ක්ෂණිකවම දැකිය හැක. තවද, පරිශීලකයා බලන පිටුව සඳහා අපට අවශ්‍ය පරිවර්තන දැනටමත් තිබීම නිසා පාරිභෝගික පාර්ශවයේ ජාල අයදුම්වලට අපට අවශ්‍ය නොවේ.

සේවාදායක පැත්තේ රෙන්ඩර කිරීම සකසීමට, /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};
};

ඔබේ සැකසුමට අනුව isProduction පරීක්ෂාව සකස් කරන්න. true නම්, TacoTranslate පොදු API යතුර පෙන්වනු ඇත. අපි දේශීය, පරීක්ෂණ, හෝ ස්ටේජින් පරිසරයක ( isProduction is false) සිටින විට, නව පෙළ පරිවර්තනය සඳහා එවෙන බව වග බලාගැනීමට රහසිගත read/write API යතුර භාවිතා කරමි/කරන්න.

මාර්ගගත කිරීම සහ නැවත යොමු කිරීම අපේක්ෂිත ලෙස ක්‍රියා කරන බව තහවුරු කිරීමට, අපට /middleware.ts නමින් ගොනුවක් සාදිය යුතුය. Middleware භාවිතයෙන්, අපට පරිශීලකයින් ඔවුන්ගේ කැමති භාෂාවෙන් ඉදිරිපත් කරන ලද පිටු වෙත යොමු කළ හැක.

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);
}

කරුණාකර matcher Next.js Middleware ලේඛනය අනුව සකස් කර ඇති බවට සහතිකවන්න.

ග්‍රාහක පාර්ශවයෙන්, භාවිතාකරුගේ ප්‍රියතම භාෂාව වෙනස් කිරීමට locale කුකීය වෙනස් කළ හැක. මෙම ක්‍රියාවලිය කෙසේ සිදු කළ හැකි දැයි අදහස් ලබාගැනීමට කරුණාකර සම්පූර්ණ උදාහරණ කේතය බලන්න!

පියවර 5: පළ කරන්න සහ පරීක්ෂා කරන්න!

අපි අවසන් වුණා! ඔබේ React යෙදුම දැන් ස්වයංක්‍රීයව පරිවර්තනය වනු ඇත, ඔබ Translate කොම්පොනන්ට් එකට ඕනෑම පෙළක් එකතු කරන විට. API යතුර සඳහා read/write අවසර ඇති පරිසර වල පමණක් පරිවර්තනය කිරීමට නව පෙළ නිර්මාණය කළ හැකි වන බව සලකන්න. අපි නිර්දේශ කරන්නේ එවැනි API යතුරක් භාවිතා කරමින් ඔබගේ ප්‍රොඩක්ෂන් යෙදුම පරීක්ෂා කළ හැකි වසා ඇති සහ ආරක්ෂිත ස්ටේජින් පරිසරයක් තබා, සජීවී කිරීමට පෙර නව පෙළ එකතු කර පරීක්ෂා කිරීමයි. මෙය ඔබගේ රහස් API යතුර හොරකම් වීම වැළැක්වීමටත්, අදාළ නොවන නව පෙළ එකතු කිරීමෙන් ඔබගේ පරිවර්තන ව්‍යාපෘතිය අවශ්‍යයේට වඩා විශාල වීම (bloating) වැළැක්වීමටත් උපකාරී වේ.

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!