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 keys ටැබ් වෙත යන්න. එක් 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 යතුර client-side නිෂ්පාදන පරිසරවලට කිසිවිටෙකත් හෙළි නොවන බවට වග බලාගන්න.

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

• TACOTRANSLATE_DEFAULT_LOCALE: පෙරනිමි fallback ලොකේල් කේතය. මෙම උදාහරණයේ, ඉංග්‍රීසි සඳහා අපි එය en ලෙස සකසමු.
• TACOTRANSLATE_ORIGIN: ඔබගේ ස්ට්‍රිං ගබඩා කිරීමට භාවිත වන “ෆෝල්ඩරය”, උදාහරණයකට ඔබගේ වෙබ් අඩවියේ 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 ප්‍රොවයිඩරය ක්‍රියාත්මක කරන්න.

'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 දැන් සූදානම් වූ බැවින්, අපගේ යෙදුමේ මූලික layout එක වන /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!" />
	);
}

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

Step 4: සේවාදායක-පාර්ශ්වීය රෙන්ඩර කිරීම ක්‍රියාත්මක කිරීම

TacoTranslate සේවාදායක පැත්තේ රෙන්ඩරින් (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 යතුර ප්‍රදර්ශනය කරනු ඇත. අපි ස්ථානීය, පරීක්ෂණ හෝ ස්ටේජින් පරිසරයක සිටිනවා නම් (isProduction is false), නව පෙළ පරිවර්තනය සඳහා යැවෙන බවට සහතික කිරීම සඳහා අපි රහසිගත read/write API යතුර භාවිතා කරමු.

Routing සහ redirection අපේක්ෂිත ලෙස ක්‍රියා කරන බවට සහතික කිරීමට, අපට /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: නිකුත් කර පරීක්ෂා කරන්න!

අපි අවසන් වුණා! ඔබගේ React යෙදුම දැන් Translate සංරචකයකට ඕනෑම පෙළක් එක් කළ විට ස්වයංක්‍රීයව පරිවර්තනය වේ. සටහන: 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!