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

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

මෙම ලිපියේදී, අපි සර්වර්‑පාර්ශ්ව රෙන්ඩරින් (server-side rendering) සමඟ ඔබගේ React Next.js යෙදුමට අන්තර්ජාතිකරණය කෙසේ එක් කිරීමේ හැදෑරීම සිදු කරනවා. TL;DR: සම්පූර්ණ උදාහරණය මෙහි බලන්න.

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

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

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

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

ඔබගේ ටර්මිනල් තුළ npm භාවිතයෙන් එය ස්ථාපිත කරමු:

npm install tacotranslate

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

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

TacoTranslate යෙදුම් UI තුළ ව්‍යාපෘතියක් සාදන්න සහ එහි API යතුරු ටැබය වෙත යන්න. එක් read යතුරක් සහ එක් read/write යතුරක් නිර්මාණය කරන්න. අප ඒවා පරිසර විචල්‍ය ලෙස සුරක්ෂිත කරනු ඇත. read යතුර අප 'public' ලෙස හඳුන්වනු ලබන අතර read/write යතුර secret වේ. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබේ ව්‍යාපෘතියේ මූල (root) තුළ .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) පෙරනිමි භාෂා කේතය. මෙම උදාහරණයේ, අපි එය en (ඉංග්‍රීසි) ලෙස සකසමු.
• TACOTRANSLATE_ORIGIN: ඔබගේ පෙළ ගබඩා වන “ෆෝල්ඩරය”, උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ URL එක. Origins පිළිබඳ වැඩිදුර කියවන්න.

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'; සලකන්න.

සන්දර්භ ප්‍රදායකය දැන් සකස් වී ඇති බැවින්, අපගේ යෙදුමේ මුල් සැකිල්ල (root 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 යතුර ප්‍රදර්ශනය කරනු ඇත. අපි local, test හෝ staging පරිසරයක සිටිනවා නම් (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);
}

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

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

පියවර 5: නිකුත් කර පරීක්ෂා කරන්න!

අපි අවසන් විය! ඔබ Translate කොම්පෝනන්ට් එකකට පෙළ කිසිවක් එක් කරන විට, ඔබගේ React යෙදුම දැන් ස්වයංක්‍රීයව පරිවර්තනය වේ. සලකන්න, API යතුර සඳහා read/write අවසර ඇති පරිසරවලට පමණක් පරිවර්තනය සඳහා නව පෙළ නිර්මාණය කළ හැකි බව. අපි ඔබට උපදෙස් දෙන්නේ, එවැනි API යතුරක් භාවිතයෙන් ඔබේ නිෂ්පාදන යෙදුම පරීක්ෂා කළ හැකි, අගුළුගසා ආරක්ෂිත staging පරිසරයක් තබාගැනීමටයි — එහිදී ප්‍රචලිත කිරීමට පෙර නව පෙළ එකතු කළ හැක. මෙය කවුරුන්හත් ඔබගේ රහසිගත API යතුර සොරකමකට ලක් වීම වැළැක්වීමට සහ නොසම්බන්ධ නව පෙළ එකතු කිරීමෙන් ඔබගේ පරිවර්තන ව්‍යාපෘතිය අතිරික්ත ලෙස扩大 වීමට (bloated වීමට) ඉඩ නොදීමට උපකාරී වේ.

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!