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

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

මේ ලිපියෙන් අපි සේවාදායක පැත්තේ ප්‍රදර්ශනය සමඟ ඔබගේ 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 ලෙස වේ. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබගේ ව්‍යාප්ෘතියේ මූල ෆෝල්ඩරයේ .env ගොනුවට එක් කළ හැක.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

රහසිගත read/write API යතුර පාරිභෝගික පැත්තේ නිෂ්පාදන පරිසරවලට කිසිවිටෙක හෙළි නොකරන්න.

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

• TACOTRANSLATE_DEFAULT_LOCALE: පූර්වනිර්ණිත (fallback) භාෂා කේතය. මෙම උදාහරණයේ, එය ඉංග්‍රීසි සඳහා 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 යනු සමහර ඇතුළත් දෝෂ හැසිරවීම් සහිත උපයෝගී ක්‍රියාවලියක් පමණි. දැන්, /app/[locale]/tacotranslate.tsx නමින් ගොනුවක් සාදන්න; එහිදී අපි TacoTranslate provider එක ක්‍රියාත්මක කරමු.

'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'; සලකන්න.

පරිප්‍රේක්ෂය සැපයුම්කරු දැන් සූදානම් වූ බැවින්, අපගේ යෙදුමේ මූලික සැකසුම වන /app/[locale]/layout.tsx නම් ගොනුවක් සෑදන්න. මෙම මාර්ගය තුළ Dynamic Routes භාවිතා කරන ෆෝල්ඩරයක් ඇති බව සලකන්න, එහි [locale] යනු ගතික පරාමිතියකි.

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 ඔබගේ ව්‍යාපෘතිය සඳහා සක්‍රීය කළ සියලු locale කේත පෙර-රෙන්ඩර් වන බව සහතික කරයි.

දැන් අපේ පළමු පිටුව සාදමු! /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 සර්වර්‑පාර්ශ්වීය රෙන්ඩරින්ට සහාය දක්වයි. මෙය පරිශීලක අත්දැකීම විශාල ලෙස වැඩි කරයි — මුලින් භාෂාන්වර්තනය නොකළ අන්තර්ගතයක් පැහැර යාමක් වෙනුවට පරිවර්තිත අන්තර්ගතය වහාම පෙන්වයි. අමතරව, පරිශීලක පාර්ශ්වයෙන් ජාල අයදුම් අවලංගු කළ හැක, මන්ද පරිශීලකයා නරඹන පිටුව සඳහා අවශ්ය පරිවර්තන අපට දැනටමත් තිබේ.

සර්වර් පැත්තේ සංදර්ශනය සැකසීමට, /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 යතුර පෙන්වනු ඇත. අපි දේශීය, පරීක්ෂණ, හෝ ස්ටේජින් පරිසරයක ( 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 Middleware පිළිබඳ ලේඛනයට අනුකූලව ලෙස සකසා ඇති බව වග බලා ගන්න.

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

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

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