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

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

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

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

මෙම මාර්ගෝපදේශය Pages Router භාවිතා කරන Next.js යෙදුම් සඳහා වේ.
ඔබ App 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 ලෙසය. උදාහරණයකට, ඔබ ඒවා ඔබේ ව්‍යාපෘතියේ මූලික ෆෝල්ඩරයේ .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) locale කේතය. මෙම උදාහරණයේ, අපි එය ඉංග්‍රීසි සඳහා en ලෙස සකස් කරමු.
TACOTRANSLATE_ORIGIN: ඔබගේ පෙළ (strings) ගබඩා වන “ෆොල්ඩරය”, උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ 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 ස්වයංක්‍රීයව නිර්වචනය කරනු ඇත.

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

/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 ඔබගේ පරිවර්තන සේවාදායක පැත්තේ රෙන්ඩර කිරීම සඳහා ඉඩ සලසයි. මෙය පරිශීලක අත්දැකීම බෙහෙවින් වඩා හොඳ කරයි — පරිවර්තනය කළ අන්තර්ගතය ඉක්මනින් පෙන්වීමෙන්, මුලින් පරිවර්තනය වී නොමැති අන්තර්ගතයේ කෙටි දැක්මක් (flash) නොසිදුවේ. තවද, අපට ග්‍රාහක පැත්තේ ජාල ඉල්ලීම් බහින්නට හැකිවෙයි, මන්ද අපට අවශ්‍ය සියලු පරිවර්තන දැනටම තිබේ.

අපි /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 යතුර පෙන්වනු ඇත. අපි ස්ථානීය, පරීක්ෂණ හෝ ස්ටේජින් පරිසරයක (isProduction is false) සිටින විට, නව strings පරිවර්තනය සඳහා යවන බවට සහතික කිරීමට රහසිගත read/write API යතුර භාවිතා කරනු ඇත.

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

මෙම ක්‍රියාකාරීත්වයන්ට ආදාන ලෙස ආර්ග්යුමන්තු තුනක් ඇත: එක් Next.js Static Props Context වස්තුවක්, TacoTranslate සඳහා වින්‍යාසයක්, සහ විකල්ප 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ට වඩා භාෂාවන් වෙත සහ ඒවාගෙන් ආපසු පරිවර්තනය ඉක්මනින් සිදු කරයි. අදම ආරම්භ කරන්න!