Next.js යෙදුම් සඳහා ජාත්‍යන්තරීකරණයට (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 යෙදුම් UI තුළ ව්‍යාපෘතියක් නිර්මාණය කර, එහි API යතුරු ටැබයට යන්න. එක් read යතුරක් සහ එක් read/write යතුරක් සාදන්න. අප ඒවා පරිසර විචල්‍ය ලෙස සුරකින්නෙමු. read යතුර අපි public ලෙස හඳුන්වනු ලබන අතර read/write යතුර secret වේ. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබේ ව්‍යාපෘතියේ මූලයේ .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: ඔබගේ strings ගබඩා කරන “ෆොල්ඩරය”, උදාහරණයක් ලෙස ඔබගේ වෙබ් අඩවියේ 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 සැපයුම්කරු එක් කරන්නෙමු.

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 ගොනුව නිර්මාණය කිරීමෙන් හෝ සංශෝධනය කිරීමෙන් ආරම්භ කරමු.

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 යතුරක් භාවිතයෙන් ඔබේ නිෂ්පාදන යෙදුම පරීක්ෂා කළ හැකි, වසා ඇති හා ආරක්ෂිත 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!