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

ඔබගේ 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 ප්‍රදේශ කේතය. මේ උදාහරණයේදී, අපි එය 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 සංරචකවල අක්ෂර මාලා පරිවර්තනය කිරීමට Translate සංරචකය භාවිතා කිරීමට හැකි විය යුතුය.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

පියවර 5: යොදන්න සහ පරීක්ෂා කරන්න!

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

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

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