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

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

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

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

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

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

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

ඒක ඔබේ terminal එකෙන් npm භාවිතා කර ස්ථාපනය කරමු:

npm install tacotranslate

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

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

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 locale කේතය. මෙම උදාහරණයේ, අපි en (ඉංග්‍රීසි) ලෙස සකසන්නෙමු.
• TACOTRANSLATE_ORIGIN: ඔබගේ string එකතු කරන “ෆෝල්ඩරය“, උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ 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>
	);
}

මෙය කාර්යය පාරිභෝගික කොම්පෝනෙන්තුවක් බව පෙන්වන 'use client'; සලකුණු කරගන්න.

Context provider එක දැන් සකස් කර ඇති බැවින්, අපගේ යෙදුමේ මූලික 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 සේවාදායක පාර්ශ්ව සංස්කරණය ආධාර කරයි. මෙය පරිශීලක අත්දැකීම විශාල ලෙස උසස් කරයි, පලමුව අපරිවර්තිත අන්තර්ගතයක පැහැදිලි කොටස් පෙන්වීම වෙනුවට, අනුපරිවර්තනය කළ අන්තර්ගතය කඩිනමින් පෙන්වීමෙන්. අමතරව, අපට පරිශීලකයා බලන පිටුව සඳහා අපට අවශ්‍ය අනුපරිවර්තන දැනටමත් ඇති බැවින්, ගනුදෙනුකරුවාගේ ජාල අයදුම් කිරීම්වලට ඉවත්විය හැක.

සර්වර් පාර්ශව අපචාරක කිරීම සකස් කිරීමට, /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) සිටිනවා නම්, නව string පරිවර්තනයට යවන බවට සහතික වීමට රහසිගත 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: විනිවිද කිරීම සහ පරීක්ෂා කිරීම!

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

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!