Next.js ඇප්ස් සඳහා ජාත්‍යන්තරීකරණය (i18n) සඳහා හොඳම විසඳුම

එය කෙසේ ක්‍රියා කරන්නේද

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

මෙම පංතිමාලාවේදි, අපි React Next.js යෙදුමට ජාත්‍යන්තරීකරණය සහිතව සේවාදායක පැත්තේ පෙළගැසීම හරහා කෙළවරක් පෙන්වන්නෙමු. TL;DR: සම්පූර්ණ උදාහරණය මෙහි බලන්න.

මෙම මාර්ගෝපදේශය Pages Router භාවිතා කරන Next.js යෙදුම් සඳහා වනවා.
ඔබ App Router භාවිතා කරනවා නම්, කරුණාකර වෙනුවට මෙම මාර්ගෝපදේශය බලන්න.

පියවර 1: i18n පුස්තකාලයක් ස්ථාපනය කරන්න

ඔබගේ Next.js යෙදුම තුළ ජාත්යන්තරකරණය (internationalization) ක්‍රියාත්මක කිරීමට, අපි මුලින්ම 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: ඔබේ ස්ත්‍රිං අඩංගු වන "ෆෝල්ඩරය", උදාහරණයක්ként ඔබේ වෙබ් අඩවියේ URL එක. මෙහි මූලාශ්‍ර පිළිබඳ වැඩි විස්තර කියවන්න.

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

සැලැස්ම 3: TacoTranslate සකසීම

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

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