App Router பயன்படுத்தும் Next.js செயலியில் பல்துறை மொழிமாற்றத்தை (internationalization) எவ்வாறு அமல்படுத்துவது

உலகம் அதிகமாகப் பரிணமிக்கும்போது, வலைதள உருவாக்குனர்களுக்கு வெவ்வேறு நாடுகள் மற்றும் பண்பாடு கொண்ட பயனர்களைப் பூர்த்தி செய்யக்கூடிய பயன்பாடுகளை உருவாக்குவது முக்கியமாகிறது. இதற்கு ஒரு முக்கிய வழி என்றால், internationalization (i18n) ஆகும், இது உங்கள் பயன்பாட்டை பல மொழிகள், நாணயங்கள் மற்றும் தேதி வடிவங்களுக்கு ஏற்ப மாற்ற அனுமதிக்கிறது.

இந்த கட்டுரையில், உங்கள் React Next.js பயன்பாட்டிற்கு, server side rendering உடன், எப்படி internationalization ஐச் சேர்ப்பது என்று நாம் ஆராய்ப்போம். TL;DR: முழு உதாரணத்தைக் காண இங்கே கிளிக் செய்யவும்.

இந்த வழிகாட்டி App Router பயன்படுத்தும் Next.js பயன்பாடுகளுக்கானது.
நீங்கள் Pages Router பயன்படுத்தினால், பதிலாக இந்த வழிகாட்டியைப் பாருங்கள்.

படி 1: ஒரு i18n நூலகத்தை நிறுவு

உங்கள் Next.js செயலியில் சர்வதேசமயமாக்கலை (internationalization) செயல்படுத்த முதலில் ஒரு i18n நூலகத்தை தேர்ந்தெடுக்க வேண்டும். பல பிரபலமான நூலகங்கள் உள்ளன, அதில் next-intl ஒன்றாகும். ஆனால் இந்த உதாரணத்தில், நாம் TacoTranslate ஐ பயன்படுத்தப் போகிறோம்.

TacoTranslate உங்கள் strings-ஐ எந்த மொழியிலும் முன்னேற்றமான AI-யைப் பயன்படுத்தி தானாக மொழிபெயர்க்கிறது, மேலும் JSON கோப்புகளின் கடினமான மேலாண்மையிலிருந்து விடுவிக்கிறது.

இதை உங்கள் டெர்மினலில் npm மூலம் நிறுவுவோம்:

npm install tacotranslate

அடி 2: இலவசமாக TacoTranslate கணக்கை உருவாக்கவும்

இப்போது நீங்கள் மொดியூலை நிறுவிக் கொண்டதால், உங்கள் TacoTranslate கணக்கு, ஒரு மொழிபெயர்ப்பு திட்டம் மற்றும் தொடர்புடைய API விசைகள் உருவாக்க நேரம் வந்துள்ளது. இங்கே கணக்கு உருவாக்கவும். இது இலவசமானது மற்றும் கிரெடிட் கார்டை சேர்க்க தேவையில்லை.

TacoTranslate பயன்பாட்டு UI-வில் ஒரு project உருவாக்கி, அதன் API keys தாவலை நோக்கிச் செல்லவும். ஒரு read key மற்றும் ஒரு read/write key உருவாக்கவும். இதை நாங்கள் சுற்றுச்சூழல் மாறிகள் (environment variables) ஆக சேமிப்போம். read key-ஐ நாம் public எனக் கூறுகிறோம் மற்றும் read/write key secret ஆகும். உதாரணமாக, இவை உங்கள் project-இன் root-இல் உள்ள .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. இருவாக்கங்கள் பற்றி மேலும் படிக்க இங்கே.

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

அடி 3: TacoTranslate ஐ அமைத்தல்

உங்கள் பயன்பாட்டுடன் TacoTranslate ஐ ஒருங்கிணைக்க, முந்தைய API விசைகளைப் பயன்படுத்தி ஒரு கிளையன்ட் உருவாக்க வேண்டும். உதாரணமாக, /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>
	);
}

'use client'; என்பது இது ஒரு கிளையண்ட் கூறு என்று அடையாளப்படுத்துகிறது என்பதைக் கவனிக்கவும்.

Context provider இப்போது தயார் நிலையில் இருப்பதால், /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 உங்கள் திட்டத்திற்கு நீங்கள் இயக்கு செய்த அனைத்து உள்ளூர் குறியீடுகளும் முன்-அமைக்கப்பட்டிருக்கின்றன என்பதை உறுதிப்படுத்துகிறது.

இப்போது, நமது முதல் பக்கத்தை உருவாக்கலாம்! /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 செர்வர் பக்க தரவமைப்பிசை (server side rendering) ஐ ஆதரிக்கிறது. இது மொழிபெயர்க்கப்பட்ட உள்ளடக்கத்தை உடனடியாகக் காண்பிப்பதால் பயனர் அனுபவத்தை பெரிதாக மேம்படுத்துகிறது, முதலில் மொழிபெயர்க்கப்படாத உள்ளடக்கத்தின் ஒரு திடீர் பிரகாசம் (flash) காட்டாததைப் போன்றது. கூடுதலாக, நாம் வாடிக்கையாளர் பக்கத்தில் நெட்வொர்க் கோரிக்கைகளைத் தவிர்க்கலாம், ஏனெனில் பயனர் பார்க்கும் பக்கத்திற்கு தேவையான மொழிபெயர்ப்புகளைக் כבר கொண்டிருக்கிறோம்.

சர்வர் பக்கம் ரெண்டரிங்கை அமைக்க, /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 கூறலில் சேர்த்தவுடன் தானாகத் தமிழாக்கப்படும். கவனிக்கவும், read/write அனுமதிகளுடன் உள்ள API விசையுடைய சூழல்களின்தான் புதிய சங்கிலிகளை தமிழாக்கம் செய்ய உருவாக்க முடியும். ஃபைனல் வெளியீட்டுக்கு முன் புதிய சங்கிலிகளைச் சேர்க்க, கடைசியில் உங்கள் தயாரிப்பு பயன்பாட்டை API விசையோடு சோதிக்க நீங்கள் மூடப்பட்ட மற்றும் பாதுகாக்கப்பட்ட ஸ்டேஜிங் சுற்றுச்சூழலை பரிந்துரைக்கிறோம். இதனால் யாரும் உங்கள் ரகசிய API விசையை திருட வேண்டியதில்லை, மேலும் புதிய, தொடர்புடையதல்லாத சங்கிலிகளை சேர்க்கும் மூலம் உங்கள் தமிழாக்க திட்டத்தை பெரிதாகச் செய்யாமல் தடுக்கும்.

தயவுசெய்து எங்கள் GitHub சுயவிவரத்தில் உள்ள முழுமையான உதாரணத்தை காணவும். அங்கு, நீங்கள் Pages Router பயன்படுத்தி இதனை எப்படி செய்வது என்பதற்கான உதாரணத்தையும் காணலாம்! நீங்கள் எந்தப் பிரச்சனைகளையும் சந்தித்தால், தயவுபுரிந்து எங்களை தொடர்பு கொள்ளவும், நாங்கள் உதவ விரும்புகிறோம்.

TacoTranslate மூலம் உங்கள் React பயன்பாடுகளை எளிதாக மற்றும் தானாகவே எந்த மொழியிலும் விரைவாக உள்ளூர்மயமாக்கலாம். இன்று துவங்குங்கள்!