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

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

මෙම ලිපියේදී, අපි ඔබගේ React Next.js යෙදුමට ජාත්‍යන්තර සංස්කරණය server side rendering සමඟ එකතු කරන හැටි පරීක්ෂා කරමු. 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 යෙදුම තුළ, ව්PROJECTයක් සාදලා, එහි API යතුරු ටැබයට යන්න. read යතුරක් සහ read/write යතුරක් සාදන්න. අපි ඒවා පරිසර 변수 ලෙස සුරක්ෂිත කරමු. read යතුර අපි public ලෙස හැඳින්වෙලා තියෙන්නේ, සහ read/write යතුර secret ලෙසය. උදාහරණයක් ලෙස, ඔබ ඒවා ඔබගේ ව්PROJECTයේ මූලික මැදිහත්වීමේ .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: ඔබගේ ශ්‍රේණි තබාගන්නා "ෆෝල්ඩරය", ඔබගේ වෙබ්අඩවියේ URL එක වැනි. මෙහි Origins ගැන වැඩි විස්තර කියවන්න.

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

පියවර 3: TacoTranslate සැකසීම

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 සපයන්නා ක්‍රියාත්මක කරමු.

'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 සර්වර් පැත්තේ rendering ක්‍රියාවලියට සහාය දක්වයි. මෙය පරිශීලක අත්දැකීම විශාල ලෙස වැඩි දියුණු කරයි, මුල්වරට අපරිවර්තනය කළ අන්තර්ගතයක් පෙන්වීම වෙනුවට පරිවර්තනය කළ අන්තර්ගතය වහාම පෙන්වීමෙන්. අමතරව, අපට පාරිභෝගික පාර්ශවයේ ජාල ඉල්ලීම් හරහා යාම හැරිය හැකිය, මන්ද අප දැනටමත් පරිශීලකයා නරඹන පිටුව සඳහා අවශ්‍ය පරිවර්තන තිබේ.

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 යතුර භාවිතා කරමු.

පාඨ ගමන් මගපෙන්වීම සහ Redirect ක්‍රියාවලිය අපේක්ෂිත පරිදි ක්‍රියාත්මක වන බවට විශ්වාස කරන්න, අපි /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 අවසර ඇති පරිසරවලට පමණක් පරිවර්තනය සඳහා නව පේළි තැනිය හැකි බව සලකන්න. අපි ඔබට ආරක්ෂිත හා සීමාසහිත සාධක පරිසරයක් (staging environment) තැබීමට නිර්දේශ කරන්නේ එහිදී ඔබට එවැනි API යතුරකින් සමඟින් ඔබේ නිෂ්පාදන යෙදුම පරීක්ෂා කරමින්, සජීවී කිරීමට පෙර නව පේළි එකතු කළ හැකි බවයි. මෙය කවුරුහරි ඔබේ රහසිගත API යතුර හොරා ගැනීමට නියමයෙන් වැළැක්වීමක් වන අතර, නව, අසම්බන්ධ පේළි එකතු කරමින් ඔබේ පරිවර්තන ව්යාපෘතිය අධික ලෙස පිරිවැය වීම වැලැක්වීමටද උපකාරී වේ.

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

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