App Router භාවිතා කරන Next.js යෙදුමක් තුළ අන්තර්ජාතිකරණය කොහොමට ක්‍රියාත්මක කරන්නේද?

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

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

මෙම මාර්ගෝපදේශය App Router භාවිතා කරන Next.js යෙදුම් සඳහා වේ.
ඔබ Pages 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 වේ. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබගේ ව්‍යාපෘතියේ root හි .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: ඔබගේ පෙළ (strings) ගබඩා වන “ෆෝල්ඩරය”, උදාහරණයක් ලෙස ඔබගේ වෙබ් අඩවියේ 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

අපි ඉක්මනින් TACOTRANSLATE_API_KEY සහ TACOTRANSLATE_PROJECT_LOCALE ස්වයංක්‍රීයව නිර්වචනය කරන්නෙමු.

Client එක වෙනම ගොනුවක සෑදීම පසුව නැවත භාවිතයට ගන්න පහසු කරයි. getLocales යනු ඇතුළත් දෝෂ සැකසීම් සහිත සාමාන්‍ය utility ෆන්קשන් එකකි. දැන්, /app/[locale]/tacotranslate.tsx නම් ගොනුවක් සෑදන්න, එහිදී අපි TacoTranslate ප්‍රොවයිඩරය ක්‍රියාත්මක කරමු.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

මෙය client කොම්පොනන්ට් එකක් බව සදහන් කරන 'use client'; ට සලකන්න.

Context provider එක දැන් සූදානම්ව ඇති බැවින්, අපගේ යෙදුම සඳහා මූලික ලේඛන රූපරේඛාව (root layout) වන /app/[locale]/layout.tsx යන නමින් ගොනුවක් සාදන්න. සටහන් කරන්න: මෙම මාර්ගය තුළ Dynamic Routes භාවිතා කරන ෆෝල්ඩරයක් ඇත, එහි [locale] යනුවෙන් දැක්වෙන්නේ dynamic පරාමිතියක් බවයි.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

මෙහි පළමුව සැලකිල්ලට ගත යුතු වන්නේ අපි එම භාෂාවට වූ පරිවර්තන ලබාගැනීමට අපගේ Dynamic Route පරාමිතිය [locale] භාවිතා කරන බවයි. එමෙන්ම, generateStaticParams ඔබගේ ව්‍යාපෘතිය සඳහා සක්‍රීය කළ සියළුම භාෂා කේත පෙර-රෙන්ඩර් කරන බව සහතික කරයි.

දැන් අපි අපේ පළමු පිටුව සාදමු! /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

තත්පර 60කින් පසු පිටුව නැවත-ගොඩනැගීමට Next.jsට කියා, ඔබගේ පරිවර්තන යාවත්කාලීනව තබන revalidate විචල්‍යය සලකන්න.

පියවර 4: සර්වර් පැත්තේ රෙන්ඩර කිරීම ක්‍රියාත්මක කිරීම

TacoTranslate සර්වර්-පාර්ශ්වීය ප්‍රදර්ශනය (server side rendering) සඳහා සහය දක්වයි. මෙය පරිශීලක අත්දැකීම විශාල ලෙස වර්ධනය කරයි — මුලින් නොපරිවර්තිත අන්තර්ගතය කෙටි කාලයකට පෙන්නවීම වෙනුවට පරිවර්තිත අන්තර්ගතය වහාම පෙන්වනු ලැබේ. තවද, පරිශීලකයා නරඹන පිටුව සඳහා අපට අවශ්‍ය පරිවර්තන දැනටම තිබෙන බැවින් client පාර්ශ්වයෙන් ජාල ඉල්ලීම් කිරීමට අපට අවශ්‍ය නැත.

Server-side rendering සකස් කිරීම සඳහා, /next.config.js ගොනුව සාදන්න හෝ සංස්කරණය කරන්න:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

ඔබගේ සැකසුමට අනුව isProduction පරීක්ෂාව වෙනස් කරන්න. ඔබ true නම්, TacoTranslate පොදු API යතුර ප්‍රදර්ශනය කරනු ඇත. අපි local, test හෝ staging පරිසරයක සිටිනවා නම් (isProduction is false), නව පෙළ පරිවර්තනය සඳහා යැවෙන බවට සහතික කිරීම සඳහා රහසිගත read/write API යතුර භාවිතා කරමු.

මාර්ගගත කිරීම සහ නැවත යොමු කිරීම අපේක්ෂිත පරිදි සිදුවෙන බවට සහතික කිරීම සඳහා, අපට /middleware.ts නමින් ගොනුවක් සාදාගත යුතුය. Middleware භාවිතයෙන්, පරිශීලකයන් ඔවුන් කැමති භාෂාවෙන් ඉදිරිපත් කර ඇති පිටු වෙත අපට යළි යොමු කළ හැකිය.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

කරුණාකර matcher Next.js මැඩ්ල්වෙයාර් ලේඛනයට අනුව සකස් කර ඇති බවට වග බලා ගන්න.

පාරිභෝගික පැත්තේ, පරිශීලකයාගේ කැමති භාෂාව වෙනස් කිරීමට ඔබ locale කූකිය වෙනස් කළ හැක. මෙම ක්‍රියාවලිය කෙසේ සිදු කළ හැකිදැයි අදහස් ලබා ගැනීමට, කරුණාකර පූර්ණ උදාහරණ කේතය බලන්න!

5 වන පියවර: නිකුත් කරන්න සහ පරීක්ෂා කරන්න!

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

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 Pages 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!