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

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

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

මෙම මාර්ගෝපදේශය Next.js යෙදුම් සඳහා වන අතර ඒවා Pages Router භාවිතා කරයි.
ඔබ 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 යතුරක් නිර්මාණය කරන්න. අප ඒවා පරිසර විචල්‍ය ලෙස සුරකින්නෙමු. read යතුර අප public ලෙස හඳුන්වන්නේය සහ read/write යතුර secret වේ. උදාහරණයක් ලෙස, ඔබට ඒවා ඔබගේ ව්‍යාපෘතියේ මුල ඇති .env ගොනුවට එක් කළ හැක.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

රහසිගත read/write API යතුර පාරිභෝගික-පාර්ශවයේ නිෂ්පාදන පරිසරවලට කිසි විටෙක හෙළා නොදෙන්න.

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

• TACOTRANSLATE_DEFAULT_LOCALE: පෙරනිමි fallback locale කේතය. මෙම උදාහරණයේ, අපි එය ඉංග්‍රීසි සඳහා en ලෙස සකසමු.
• TACOTRANSLATE_ORIGIN: ඔබගේ strings ගබඩා කරනු ලබන "ෆෝල්ඩරය", උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

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

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

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) සිදුවීම වැළැක්වේ. එමෙන්ම, අපට අවශ්‍ය සියලු පරිවර්තන දැනටමත් තිබීම නිසා client පැත්තෙන් ජාල ඉල්ලීම් පාවිච්චි කළ නොහැකිවීම වළක්වා හැක.

අපි /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 වැනි පිටු ගොනුවක් ඇත.

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කට වඩා භාෂාවන් වෙත සහ ඒවාෙන් වෙත ස්වයංක්‍රීයව හා වේගයෙන් ප්‍රදේශීයකරණය (localize) කිරීමට ඉඩ සලසයි. අදම ආරම්භ කරන්න!