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

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

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

මෙම ඉගැන්වීමේදී, අපි ඔබගේ React Next.js යෙදුමට අන්තර්ජාතිකරණය එක් කිරීම සහ server side rendering යොදා ගැනීම පිළිබඳ විමර්ශනය කිරීමට යමු. 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 ඔබගේ යෙදුමට ඒකාබද්ධ කිරීමට, පෙර ලබා දී ඇති 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 කොම්පොනන්ට් තුළ ඇති string ට් හඔ Translate component එක භාවිතා කරමින් පරිවර්තනය කිරීමට හැකි විය යුතුය.

import {Translate} from 'tacotranslate/react';

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

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

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

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

TacoTranslate ඔබගේ React යෙදුම් ඕනෑම භාෂාවකට හා භාෂාවෙන් ස්වයංක්‍රීයව දියුණු කරයි. අදම ආරම්භ කරන්න!