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

ඔබේ React අයදුම්පත තවත් ප්‍රවේශගත කිරීමට සහ නව වෙළඳපොළ වෙත ළඟා වීමට ජාත්‍යන්තරීකරණය (i18n) සමඟ සහය වන්න.

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

මෙම ලිපියෙන්, අපි ඔබගේ React Next.js යෙදුමට සේවාදායක පැත්තේ අලුත් පිටු නිර්මාණ සමඟ අන්තර්ජාතිකරණය එක් කිරීම කෙසේදැයි විග්‍රහ කරමු. TL;DR: සම්පූර්ණ උදාහරණය මෙතැනින් බලන්න.

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

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

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

TacoTranslate ඔබගේ strings ඕනෑම භාෂාවකට කලාත්මක AI භාවිතයෙන් ස්වයංක්‍රීයව පරිවර්තනය කරයි, සහ JSON ගොනු කළමනාකරණයේ කාර්යබහුලතාවයෙන් ඔබව නිදහස් කරයි.

එය ඔබගේ ටර්මිනල් තුළ npm භාවිතා කර ස්ථාපනය කරමු:

npm install tacotranslate

පියවර 2: නොමිලේ TacoTranslate ගිණුමක් සාදා ගන්න

ඔබ මොඩියුලය ස්ථාපනය කර ඇති බැවින් දැන් ඔබේ TacoTranslate ගිණුමක්, පරිවර්තන ව්‍යාපෘතියක් සහ ප්‍රාදේශීය API යතුරු සාදන වේලාවයි. මෙහි ගිණුමක් සාදන්න. එය නොමිලේ වන අතර, ක්‍රඩාට් කාඩ්පතක් එක් කිරීමට අවශ්‍ය නොවේ.

TacoTranslate යෙදුමේ UI තුළ, ව්‍යාපෘතියක් සාදන්න, සහ එහි API යතුරු ටැබයට යන්න. read යතුරක් සහ read/write යතුරක් සාදන්න. අපි ඒවා පරිසර චරයන් ලෙස සුරැකීමට යෙදෙමු. read යතුර public ලෙස හැඳින්වෙයි සහ read/write යතුර secret ලෙස හැඳින්වෙයි. උදාහරණයක් ලෙස, ඔබට ඒවා ඔබේ ව්‍යාපෘතියේ මුල් ෆෝල්ඩරයේ .env ගොනුවට එක් කළ හැකිය.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

TACOTRANSLATE_DEFAULT_LOCALE: පෙරනිමි ප්‍රතිලාභතාවන ලෝකේල් කේතයයි. මෙම උදාහරණයේ, අපි එය ඉංග්‍රීසි සඳහා en ලෙස සකසන්නෙමු.
TACOTRANSLATE_ORIGIN: ඔබගේ පදයන් ගබඩා කරනු ලබන "ෆෝල්ඩරය", ඔබගේ වෙබ් අඩවියේ URL වැනි. මෙහි මූලාශ්‍රවල ගැන වැඩිදුර කියවන්න.

.env

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

සෙපත් 3: TacoTranslate සැකසීම

ඔබගේ යෙදුම සමඟ TacoTranslate ඒකාබද්ධ කිරීම සඳහා, ඔබ කාලයට පෙර ලබා දුන් API යතුරු භාවිතා කර client එකක් සාදන අවශ්‍යතාවක් ඇත. උදාහරණයකට, /tacotranslate-client.js නම් ගොනුවක් සාදන්න.

/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 දැනටමම นิර්වචනය කරනු ඇත.

කලිංට් එක වෙනම ගොනුවක නිර්මාණය කිරීම, එය පසුව නැවත භාවිතා කිරීමට පහසු කරයි. getLocales යන්න ක්‍රියාකාරී දෝෂ නිරාකරණ සමඟ ඇති උපයෝගිතා ක්‍රියාවලියකි. දැන්, /app/[locale]/tacotranslate.tsx නම් ගොනුවක් සාදන්න, එහි අපි TacoTranslate සපයන්නා ක්‍රියාවට නිර්දේශ කරමු.

/app/[locale]/tacotranslate.tsx

'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] හෙන්නේ තත්ත්වයක් (dynamic parameter) වේ.

/app/[locale]/layout.tsx

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 නම් කිරීමෙහි ගොනුවක් සාදන්න.

/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!" />
	);
}

revalidate පෙරහන්ගැනීම පිළිබඳ අවධානය යොමු කරන්න, එය Next.js ට පිටුව තත්පර 60 කට පසු පමණක් නැවත ගොඩනඟා ඔබේ පරිවර්තන යාවත්කාලීනව පවත්වන්න කියා කියයි.

දෙසම 4: සේවාදායක පාර්ශව පිටපත් කිරීම ක්‍රියාත්මක කිරීම

TacoTranslate සර්වර්-පාර්ශවීය rendering ක්‍රියාත්මක කරන අතර, මෙයින් භාවිතා කරන්නාගේ අත්දැකීම විශාල ලෙස වර්ධනය වේ. මුලින් නොතේරුම් ගත් අන්තර්ගතයක් ෆ්ලෑෂ් ලෙස පෙන්වීම වෙනුවට, වහාම පරිවර්තනය කරන ලද අන්තර්ගතය පෙන්වයි. අමතරව, අපට client පාර්ශවයේ ජාල අයදුම් ඉවත්විය හැක, එසේ කරන්නේ භාවිතා කරන්නා බැලී සිටින පිටුව සඳහා අවශ්‍ය පරිවර්තන අප සමඟ දැනටමත් ඇති බැවිනි.

සේවාදායක පැත්තේ rendering සකස් කිරීමට, /next.config.js ගොනුව නිර්මාණය කරන්න හෝ සංස්කරණය කරන්න:

/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 භාවිතා කරමින්, අපි පරිශීලකයින් ඔවුන් කැමති භාෂාවෙන් පෙන්වෙන පිටු වෙත නැවත හරවා යා හැකිය.

/middleware.ts

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);
}

කවර හෝ Next.js Middleware ලේඛනය අනුව matcher සකස් කර ඇති බවට වග බලා ගන්න.

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

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

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

අපගේ GitHub පැතිකඩේ complete example සම්පූර්ණ උදාහරණය පරීක්ෂා කිරීමට අනිවාර්ය වේ. එහිදී, ඔබට Pages Router භාවිතා කරමින් මෙය සිදු කරන අයකිරීමේ උදාහරණයක්ද සොයාගත හැක! ඔබට කිසියම් ගැටළුවක් මුහුණ දීමට හැකි නම්, අප හා සම්බන්ධ වීමට නිදහසේ හැකියාව ඇත, අප ඔබට උදව් කිරීමට සතුටු වනු ඇත.

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