Pages Router භාවිතා කරමින් Next.js යෙදුමක ජාත්යන්තරීකරණය ක්‍රියාත්මක කිරීම කෙසේද?

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

මෙම පංතියේදී, අපි ඔබගේ React Next.js යෙදුමට අන්තර්ජාතිකරණය ජොඩාගැනීමට සහ සේවාදායක පැත්තේ ප්‍රදර්ශනය (server side rendering) සම්බන්ධයෙන් සොයා බැලීම සිදු කරමු. TL;DR: මෙහි සම්පූර්ණ උදාහරණය බලන්න.

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

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

ඔබගේ Next.js අයදුම්පතේ ජාත්‍යන්තරීකරණය ක්‍රියාත්මක කිරීමට, අපි පළමුව i18n පුස්තකාලයක් තෝරන්නෙමු. ජනප්‍රිය පුස්තකාල කිහිපයක් තිබෙන අතර, ඒ අතර next-intl එකද ඇතුළත්ය. එහෙත්, මෙම උදාහරණයේදී අපි TacoTranslate භාවිතා කරන්නෙමු.

TacoTranslate ඔබගේ string මෙන්ම කටුක 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: ප්‍රධාන පෙරනිමි fallback locale කේතය. මෙම උදාහරණයේ, අපි එය en ලෙස අංග‍්‍රේසි භාෂාවට සකසන්නෙමු.
• TACOTRANSLATE_ORIGIN: ඔබේ unicode සෙට් තබා ගන්නා "ෆෝල්ඩරය", උදාහරණයක් ලෙස ඔබගේ වෙබ් අඩවියේ URL එක. මෙහි origins ගැන වැඩිදුර කියවන්න.

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

සටහන 3: TacoTranslate සකසමින්

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 ඔබේ පරිවර්තන සඳහා සේවාදායක පාර්ශ්වයෙන් rendering කිරීම ඉඩ දේ. මෙය පරිශීලක අත්දැකීම විශාල ලෙස වර්ධනය කරයි, පළමුව පරිවර්තනය නොකළ අන්තර්ගතයක් හෙමින් පෙන්වීම වෙනුවට, පරිවර්තනය කළ අන්තර්ගතය වහාම පෙන්වීමෙන්. අතිරේකව, අපට ගනුදෙනුකරු පැත්තේ ජාල අයැදුම් මඟ හරිය හැක, නමුත් අපට අවශ්‍ය සියලු පරිවර්තන දැනටමත් ඇත.

අපි අරඹන්නේ /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 වස්තුවක්, ටැකෝට්රාන්ස්ලේට් සඳහා වින්යාසය සහ විකල්ප 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: විසි කිරීම සහ පරීක්ෂා කිරීම!

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

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

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