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 යතුරක් සාදන්න. අපි ඒවා පරිසර සැකසුම් (environment variables) ලෙස ගබඩා කරමු. read යතුර අපි කියන්නේ public යතුර ලෙසයි, සහ read/write යතුර secret යතුර ලෙසයි. උදාහරණයකි, ඒවා ඔබේ ව්යාපෘතියේ මූලික ඩිරෙක්ටරියෙහි .env ගොනුවට එක් කළ හැක.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ගහන් කරන්න එපා රහසිගත read/write API යතුර කිසිවිටෙකම client පාර්ශ්වයේ නිෂ්පාදන පරිසරවලට.

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

• TACOTRANSLATE_DEFAULT_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) සිටිනවා නම්, අලුත් strings පරිවර්තනය සඳහා යැවීමට රහසිගත read/write API යතුර භාවිතා කරමු.

දෙවරට, අපි දැක්කා Next.js යෙදුම සඳහා සහය දෙන භාෂා ලයිස්තුවක් පමණක් සකසා තිබේ. ඊළඟට කරන්නේ ඔබේ සියලු පිටු සඳහා පරිවර්තන ලබා ගැනීමයි. ඒ සඳහා, ඔබේ අවශ්‍යතාවයන් අනුව getTacoTranslateStaticProps හෝ getTacoTranslateServerSideProps භාවිතා කිරීමට හැකිය.

මේ ක්‍රියාකාරකම් තුනක් පරිගණකකරණය කරයි: එකක් Next.js Static Props Context වස්තුවක්, TacoTranslate සඳහා වින්‍යාසයක්, සහ විකල්ප Next.js ගුණාංග. සටහන් විය යුතුය revalidate getTacoTranslateStaticProps මත පළමුවරට 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 සංරචකයන් තුළ ඇති strings පරිවර්තනය කිරීමට Translate සංරචකය භාවිතා කළ හැකිය.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

පියවර 5: ක්‍රියාත්මක කර පරීක්ෂා කරන්න!

අපි අවසන් කර ඇත! ඔබේ Next.js යෙදුම දැන් ස්වයංක්‍රීයෙන් පරිවර්තනය වනු ඇත, ඔබ Translate සංරචකයට ඕනෑම ස්ට්‍රිං එකක් එක් කරන විට. API යතුරේ read/write අයිතිවාසිකම් ඇති පරිසර මධ්‍යස්ථාන වලට පමණක් පරිවර්තනය සඳහා නව ස්ට්‍රිං සෑදීම හැකි වන බව සළකන්න. අපි නිර්දොෂ සහ ආරක්ෂිත පරීක්ෂණ පරිසරයක් තිබීම ඉතාම හොඳයි, එහිදී ඔබට එවැනි API යතුරක් සමඟ ඔබේ නිෂ්පාදන යෙදුම පරීක්ෂා කර ඔන්ලයින් විමට පෙර නව ස්ට්‍රිං එකතු කළ හැකිය. මෙය කවුරුන්ටත් ඔබේ රහස් API යතුර හොරකම් කිරීමට හා අසම්බන්ධිත නව ස්ට්‍රිං එකතු කිරීමෙන් ඔබේ පරිවර්තන ව්‍යාපෘතිය අතිරික්තව වැඩි වීමට ඉඩ නොදෙනු ඇත.

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

TacoTranslate ඔබේ React अनुप्रयोग ස්වයංක්‍රීයව ඉක්මනින් ඕනෑම භාෂාවකට සහ එයින් පසු පළමුකර ගැනීමට ඉඩ සළසයි. අදම ඇරඹින්න!