Next.js යෙදුමක Pages Router භාවිතා කරන විට ජාත්‍යන්තරීකරණය (internationalization) කෙසේ ක්‍රියාත්මක කරන්නේද?

ජාත්‍යන්තරීකරණය (i18n) භාවිතයෙන් ඔබගේ React යෙදුම වඩාත් ප්‍රවේශගත කර, නව වෙළඳපොළවලට ළඟා වන්න.

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

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

මෙම මාර්ගෝපදේශය Pages Router භාවිතා කරන Next.js යෙදුම් සඳහා වේ.
ඔබ App 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 වේ. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබේ ව්‍යාපෘතියේ මුල් (root) ෆෝල්ඩරයේ ඇතැම් .env ගොනුවට එක් කළ හැක.

.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: ඔබගේ පෙළ ගබඩා කරනු ලබන “folder” එක — උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ URL එක. Origins පිළිබඳ වැඩිදුර මෙහි කියවන්න.

.env

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

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

ඔබගේ යෙදුම සමඟ TacoTranslate ඒකාබද්ධ කිරීමට, පෙර ලබාගත් API යතුරු භාවිතයෙන් client එකක් නිර්මාණය කිරීම අවශ්‍ය වේ. උදාහරණයක් ලෙස, /tacotranslate-client.js යන නමින් ගොනුවක් සාදා ගන්න.

/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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

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

client එක වෙනම ගොනුවක සාදීම පසුව නැවත භාවිතා කිරීම පහසු කරයි. දැන්, අභිරුචි /pages/_app.tsx ගොනුව භාවිත කරමින්, අපි TacoTranslate provider එක එකතු කරමු.

/pages/_app.tsx

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

ඔබට දැනටමත් කස්ටම් pageProps සහ _app.tsx තිබේ නම්, කරුණාකර ඉහත දැක්වූ ගුණාංග හා කේතය සමඟ එහි නිර්වචනය විස්තීර්ණ කරන්න.

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

TacoTranslate ඔබේ පරිවර්තන සේවාදායක පැත්තෙන් රෙන්ඩර කිරීමට ඉඩ සලසයි. මෙය පරිශීලක අත්දැකීම විශාල ලෙස දියුණු කරයි — පළමුව නොපරිවර්තිත අන්තර්ගතයක් හදිසියෙන් පෙන්වෙන්නේ වෙනුවට පරිවර්තිත අන්තර්ගතය වහාම පෙන්වීමෙන්. තවද, අපට ගනුදෙනුකරු (client) පැත්තේ ජාල අයදුම් වලට යාම අවශ්‍ය නොවේ, මක්නිසාද අපට අවශ්‍ය සියලු පරිවර්තන දැනටමත් තිබේ.

අපි ආරම්භ කරමු /next.config.js ගොනුව සාදමින් හෝ සංශෝධනය කරමින්.

/next.config.js

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

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

මෙතෙක්, අපි Next.js යෙදුම සඳහා සහය වන භාෂා ලැයිස්තුවක් පමණක් සකසා තිබේ. ඊළඟට කරන්නේ ඔබගේ සියලු පිටු සඳහා පරිවර්තන ලබා ගැනීමයි. ඒ සඳහා, ඔබගේ අවශ්‍යතා අනුව getTacoTranslateStaticProps හෝ getTacoTranslateServerSideProps එකක් භාවිතා කරන්න.

මෙම ක්‍රියාකාරක (functions) සඳහා පරාමිතීන් තුනක් අවශ්‍ය වේ: එක් Next.js Static Props Context වස්තුවක්, TacoTranslate සඳහා වූ වින්‍යාසයක් (configuration) සහ විකල්ප Next.js ගුණාංග. සලකන්න revalidate යන ගුණය getTacoTranslateStaticProps මත පෙරනිමි ලෙස 60ක් ලෙස සකසා ඇති බැවින්, ඔබගේ පරිවර්තන නවීන තත්ත්වයේ පවතිනු ලබයි.

පිටුවක් තුළ ඕනෑම එක් ක්‍රියාකාරකයක් භාවිතා කිරීමට, ඔබට /pages/hello-world.tsx වැනි පිටු ගොනුවක් ඇති බව හිතමු.

/pages/hello-world.tsx

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

ඔබ දැන් ඔබගේ සියලු React කොම්පොනන්ට් තුළ තිබෙන පෙළ පරිවර්තනය කිරීමට Translate කොම්පොනන්ට් එක භාවිතා කළ හැක.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

පියවර 5: යෙදවන්න හා පරීක්ෂා කරන්න!

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

අපගේ GitHub පැතිකඩේ සම්පූර්ණ උදාහරණය බලන්න. එහිදී, App Router භාවිතයෙන් මෙය කරන්නේ කෙසේද යන්න පෙන්වන උදාහරණයක්ද ඔබට සොයාගත හැකිය. ඔබට කිසියම් ගැටළුවක් එල්ල되නවා නම්, අපව සම්බන්ධ වීමට නිදහසේ හැකි — අපි උදව් කිරීමට සතුටු වෙමු.

TacoTranslate ඔබගේ React යෙදුම් ස්වයංක්‍රීයව සහ ඉක්මනින් 75කට වඩා භාෂා සඳහා ස්ථානික් කිරීමට ඉඩ සලසයි. අදම ආරම්භ කරන්න!