Pages Router භාවිතා කරන Next.js යෙදුමේ ජාත්‍යන්තරීකරණය (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 යෙදුම තුළ, ව්‍යාපෘතියක් සාදන්න, සහ එහි 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: පෙරනිමි විකල්ප භාෂා කේතය. මෙම උදාහරණයේ, අපි එය en ලෙස ඉංග්‍රීසි සඳහා සැකසීමට යන්නේය.
TACOTRANSLATE_ORIGIN: ඔබගේ स्ट्रින්ග් එකතු වන "ෆෝල්ඩරය", ඔබගේ වෙබ්අඩවියේ URL වැනි. මෙහි මුල් ආරම්භ පිළිබඳ වැඩිදුර කියවන්න.

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

පියවර 3: TacoTranslate සැකසීම

ඔබේ ඇප්පි케ෂන් සමඟ TacoTranslate integre කර ගැනීමට, ඔබට පෙර ලැබූ 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: යොදන්න සහ පරීක්ෂා කරන්න!

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

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

TacoTranslate ඔබට 75කට අධික භාෂා අතරින් ඔබගේ React යෙදුම් ස්වයංක්‍රියව ප්‍රදේශගත කිරීමට හැකියාව සපයයි. අදම ආරම්භ කරන්න!