App Router භාවිතා කරන Next.js යෙදුමක ජාත්‍යන්තරීකරණය කෙරෙහි ක්‍රියාත්මක කරන ආකාරය

ලෝකය වඩාත් ජාත්‍යන්තරීකරණය වන අතර, විවිධ රටවල් සහ සංස්කෘති වල පරිශීලකයන් වෙත සේවය කල හැකි යෙදුම් නිර්මාණය කළ යුතුකම වෙබ් සංවර්ධකයින් සඳහා වර්ධනය වෙමින් පවතී. මේ සාර්ථක කර ගැනීමට ඉතා ප්‍රධාන ක්‍රමයක් වන ලෝකීකරණය (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 ගිණුමක්, පරිවර්තන ව් projetos ආරම්භ කරලා ඒ සමඟ සම්බන්ධ API යතුරු සාදන්න කාලයයි. මෙතනින් ගිණුමක් සාදන්න. එය නොමිලේ වන අතර, ක්‍රෙඩිට් කාඩ්පතක් එකතු කිරීමට අවශ්‍ය නොවේ.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ඇත්තටම කිසිවෙකුටවත් රහස් read/write API යතුර client පාර්ශවයේ නිෂ්පාදන පරිසර සඳහා නොබැබලේ යුතුය.

අපි තවත් පරිසර වාරික දෙකක් එකතු කරමු: 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 ඉක්මනින් විනිවිද කිරිමට ඇත.

කලිංට් එක වෙනම ගොනුවක නිර්මාණය කිරීම, එය පසුව නැවත භාවිතා කිරීමට පහසු කරයි. 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] යනු 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!" />
	);
}

Next.js අලුත් පිටුව 60 තත්පරන් පසු නැවත සෑදීමට සහ ඔබගේ පරිවර්තන නවීකරණය කර තබා ගැනීමට කියන revalidate වරාය සලකන්න.

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

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

සේවාදායක පැත්තේ 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 යතුර භාවිතා කරනවා.

රවුටින් සහ නැවත මාරු කිරීම අපේක්ෂිත පරිදි ක්‍රියාත්මක වීමට, අපට /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 යතුරක් සමඟ පරීක්ෂා කළ හැකි අතර, සජීවීවීමට පෙර නව ධාරා එකතු කරන්න. මෙය ඔබේ රහසිගත API යතුර හොරකම් වීම වැළැක්වීම හා ඔබේ පරිවර්තන ව්‍යාපෘතිය අසම්බන්ධ නව ධාරා එකතු කිරීමෙන් අතිබර නොවීම වැළැක්වීමට උපකාරී වේ.

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

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