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

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

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

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

මෙම මාර්ගෝපදේශය Pages Router භාවිතා කරන Next.js යෙදුම් සඳහායි.
ඔබ App Router භාවිතා කරනවා නම්, කරුණාකර මෙය වෙනුවට මෙම මාර්ගෝපදේශය බලන්න.

පියවර 1: i18n පුස්තකාලයක් ස්ථාපනය කරන්න

ඔබගේ Next.js යෙදුමට ජාත්‍යන්තරකරණය යෙදවීමට, පළමුව අපි i18n පුස්තකාලයක් තෝරාගන්නෙමු. ජනප්‍රිය පුස්තකාල කිහිපයක් තිබේ, ඒ අතර next-intl ද එකකි. නමුත් මෙම උදාහරණයේදී අපි TacoTranslate භාවිතා කරන්නෙමු.

TacoTranslate නවතම AI තාක්‍ෂණය භාවිතයෙන් ඔබගේ strings ඕනෑම භාෂාවකට ස්වයංක්‍රීයව පරිවර්තනය කරයි, සහ 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 යතුර පාරිභෝගික පැත්තේ නිෂ්පාදන පරිසරවලට කිසිවිටෙකත් හෙළි නොවෙන බවට වග බලා ගන්න.

අපි තවත් පරිසර විචල්‍ය දෙකක් එක්කරන්නෙමු: 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 ස්වයංක්‍රීයව නියම කරනු ඇත.

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

අපි /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: නිකුත් කර පරීක්ෂා කරන්න!

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

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

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