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) ක්‍රියාත්මක කිරීම සඳහා, අපි පළමුව i18n පුස්තකාලයක් තෝරා ගනිමු. ජනප්‍රිය පුස්තකාල කිහිපයක් ඇත, ඒ අතර next-intl එකද. කෙසේ වෙතත්, මෙම උදාහරණයේදී අපි TacoTranslate භාවිතා කරන්නෙමු.

TacoTranslate නවතම AI තාක්ෂණය භාවිතයෙන් ඔබගේ පෙළ ඕනෑම භාෂාවකට ස්වයංක්‍රීයව පරිවර්තනය කරයි සහ JSON ගොනු කළමනාකරණයේ දුෂ්කර කාර්යයන් ඔබගෙන් ඉවත් කරයි.

ඔබේ ටර්මිනලයේ npm භාවිතයෙන් එය ස්ථාපනය කරමු:

npm install tacotranslate

පියවර 2: නොමිලේ TacoTranslate ගිණුමක් සාදන්න

දැන් ඔබ මොඩියුලය ස්ථාපිත කර ඇති බැවින්, TacoTranslate ගිණුමක්, පරිවර්තන ව්‍යාපෘතියක් සහ සම්බන්ධ API යතුරු සාදා ගැනීමට කාලයයි. මෙහි ගිණුමක් සාදන්න. එය නොමිලේ වන අතර, ක්‍රෙඩිට් කාඩ්පතක් එක් කිරීමට අවශ්‍ය නැත.

TacoTranslate යෙදුම් UI තුළ ව්‍යාපෘතියක් සාදමින් එහි API යතුරු ටැබයට යන්න. එක් 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 යතුර කිසි විටෙකත් ක්ලයින්ට්-පාර්ශවයේ නිෂ්පාදන පරිසරවලට හෙළා නොදෙන්න.

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

අපි /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කට වඩා වෙතත් ඒවාෙන් ආපසුත් ස්ථානීකරණය කිරීමට ඉඩ සලසයි. අදම ආරම්භ කරන්න!