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 keys ටැබ් එකට යන්න. එක් read යතුරක් සහ එක් read/write යතුරක් සාදන්න. අපි ඒවා පරිසර විචල්‍ය (environment variables) ලෙස සුරක්ෂිත කරමි. 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) දේශීය කේතය. මේ උදාහරණයේ, අපි එය ඉංග්‍රීසි සඳහා en ලෙස සකසනවා.
TACOTRANSLATE_ORIGIN: ඔබගේ පෙළ (strings) ගබඩා වන “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 ලෙස නියම කරනු ඇත.

ක්ලයින්ට් එක වෙනම ගොනුවක සාදීම පසුව එය නැවත භාවිතයට ගත හැකි ලෙස පහසු කරයි. දැන්, අභිරුචිකරණය කළ /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>
	);
}

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

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

TacoTranslate ඔබගේ පරිවර්තන සඳහා සේවාදායක පැත්තේ රෙන්ඩර කිරීම සලසයි. මෙය, නොපරිවර්තිත අන්තර්ගතයකින් පෙරමුණ ගන්නා ෆ්ලෑෂ් එකක් වෙනුවට පරිවර්තනය කරන ලද අන්තර්ගතය වහාම පෙන්වීම මඟින් පරිශීලක අත්දැකීම වඩාත් වර්ධනය කරයි. තවද, අපට අවශ්‍ය සියලු පරිවර්තන දැනටමත් තිබේ නිසා ප්‍රතිග්‍රාහක පැත්තෙන් ජාල අයදුම් (network requests) කිරීමට අපට අවශ්‍ය නොවේ.

අපි අරඹන්නේ /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) සිටිනවිට, නව ස්ත්‍රියන් පරිවර්තනය සඳහා යවීමේ අවශ්‍යතාවය පරිදි රහසිගත read/write API යතුර භාවිතා කරනු ඇත.

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

මෙම ක්‍රියාකාරකම් තුන පරාමිතීන් ගනී: එක් Next.js Static Props Context වස්තුවක්, TacoTranslate සඳහා සැකසුමක්, සහ විකල්ප Next.js ගුණාංග. සටහන් කරන්න: getTacoTranslateStaticProps හි revalidate පෙරනිමි අගය ලෙස 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: යොදා බලන්න සහ පරීක්ෂා කරන්න!

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

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

TacoTranslate මඟින් ඔබගේ React යෙදුම් ස්වයංක්‍රීයව දේශීයභාවීකරණය කළ හැකි අතර, 75ට වඩා භාෂාවන් වෙත සහ ඒවාගෙන් ආපසු පරිවර්තනය ඉක්මනින් සිදු කරයි. අදම ආරම්භ කරන්න!