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 භාවිතා කර ඔබගේ strings ඕනෑම භාෂාවකට ස්වයංක්‍රීයව පරිවර්තනය කරයි, සහ 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: බ්‍රහස්පතින්දා ප්‍රතිදිග_locale කේතය. මෙම උදාහරණයෙහි, අපි එය en ලෙස ආන්ගලිකයට සකසන්නෙමු.
• TACOTRANSLATE_ORIGIN: ඔබේ වාක්‍යයන් තබන "ෆෝල්ඩරය", උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ 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 නිර්වචනය කරනු ඇත.

ග්‍රාහකයා වෙනම ගොනුවක නිර්මාණය කිරීම පසුව නැවත භාවිතා කිරීමට ඉතා පහසු කරයි. දැන්, කස්ටම් /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 යතුර සොරකර ගැනීමෙන් සහ නව, නොසම්බන්ධ ලේඛන එක් කිරීමෙන් පරිවර්තන ව්‍යාපෘතිය අවශෝෂණය වීම වැළැක්වීමට උදව් කරනු ඇත.

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

TacoTranslate ඔබේ React ඇප්ලිකේෂන් නැවත නැවත ආරම්භකව කිසිදු භාෂාවට හෝ භාෂාවෙන් ස්වයංක්‍රීයව ලාංකික කිරීමට ඉඩ සලසයි. අදම ඇරඹෙන්න!