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

ඔබගේ 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 යතුර පාරිභෝගික පැත්තේ නිෂ්පාදන පරිසර වෙත කිසි විටෙකත් හෙළි නොකරන්න.

අපි තව දෝ පරිසර චරිතමාණ්ඩල (environment variables) එක් කරනු ඇත: TACOTRANSLATE_DEFAULT_LOCALE සහ TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: පෙරනිමි fallback locale කේතය. මෙම උදාහරණයට, අපි en ලෙස ඉංග්‍රීසි සඳහා සකසන්නෙමු.
TACOTRANSLATE_ORIGIN: ඔබේ string වල ගබඩා කෙරෙන "ෆෝල්ඩරය", ඔබේ වෙබ්අඩවියේ 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 ඔබගේ පරිවර්තන සඳහා සේවාදායක පාර්ශ්වයේ rendering සිදු කිරීමට හැකියාව සපයයි. මෙය පරිශීලක අත්දැකීම දියුණු කරයි, මන්ද පළමුව පරිවර්තනය වෙමින් නැති අන්තර්ගතය නොපෙනී ඉක්මනින් පරිවර්තනය කළ අන්තර්ගතය පෙන්වයි. අමතරව, අපට ගනුදෙනුකරුවා මත ජාල ඉල්ලීම් වලින් වළකී සිටිය හැකිය, මන්ද අපට අවශ්‍ය සියලුම පරිවර්තන දැනටමත් ඇත.

අපි /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 කොම්පෝනන්ට් තුළ ඇති UTF-8 පෙළ පරිවර්තනය කිරීමට 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 යෙදුම් ඕනෑම භාṣාවකට ඉක්මනින් ස්වයංක්‍රීයව පරිවර්තනය කිරීමට ඉඩ සලසයි. අදම ඇරඹෙන්න!