Next.js යෙදුම් සඳහා අන්තර්ජාතිකරණයට (i18n) හොඳම විසඳුම

මෙය කෙසේ ක්‍රියා කරයි

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

මෙම උපදෙස් මාලාවෙන් අපි server-side rendering සමඟ ඔබගේ 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 ගොනුවට එකතු කළ හැක.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

රහස් read/write API යතුර client-side නිෂ්පාදන පරිසරවලට කිසි විටෙකම හෙළි නොවන බව වග බලා ගන්න.

අපි තවත් පරිසර විචල්‍ය දෙකක් එක් කරනු ඇත: TACOTRANSLATE_DEFAULT_LOCALE සහ TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: පෙරනිමි fallback locale කේතය. මෙම උදාහරණයේදී, අපි එය ඉංග්‍රීසි සඳහා en ලෙස සකසනවා.
• TACOTRANSLATE_ORIGIN: ඔබගේ පෙළ ගබඩා වන "ෆෝල්ඩරය", උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ URL එක. Origins පිළිබඳ වැඩිදුර කියවන්න මෙතැනින්.

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

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

TacoTranslate ඔබේ යෙදුම සමඟ ඒකාබද්ධ කිරීමට, පෙර ලබාදුන් API යතුරු භාවිතයෙන් client එකක් සාදගත යුතුය. උදාහරණයක් ලෙස, /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 එක එකතු කරමු.

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

අපි /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 වැනි පිටු ගොනුවක් තිබෙන බව සැලකිය යුතුය.

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 කොම්පෝනෙන්ට් එකකට ඕනෑම පෙළක් එක් කරන විට ඔබගේ Next.js යෙදුම දැන් ස්වයංක්‍රීයව පරිවර්තනය වේ. API යතුරේ read/write අවසර ඇති පරිසරයන්ට පමණක් පරිවර්තනය සඳහා නව පෙළ නිර්මාණය කළ හැකි බව සලකන්න. එවැනි API යතුරක් භාවිතයෙන් ඔබගේ production යෙදුම පරීක්ෂා කළ හැකි, වසා ඇති හා ආරක්ෂිත staging පරිසරයක් තිබීම අපි යෝජනා කරමු — ප්‍රසිද්ධ කිරීමට පෙර එහි නව පෙළ එක් කරන්න. මෙය කවුරුන්ටත් ඔබගේ රහසිගත API යතුර සොරකම් කිරීමට, සහ නොසම්බන්ධ හා අනිවාර්ය නොවන නව පෙළ එක් කිරීමෙන් ඔබගේ පරිවර්තන ව්‍යාපෘතිය අතිරිත්තිකව පුළුල් වීමට වළක්වයි.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!