Next.js යෙදුම්වල ජාත්‍යන්තරීකරණය (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 ගොනුවට එක් කළ හැක.

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

අපි /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!