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

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

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

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

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

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

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

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

npm install tacotranslate

படி 2: இலவச TacoTranslate கணக்கை உருவாகுங்கள்

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

TacoTranslate செயலியில், ஒரு திட்டம் உருவாக்கி அதன் API விசைகள் டேபுக்கு செல்லவும். ஒரு read விசை மற்றும் ஒரு read/write விசை உருவாக்கவும். அவற்றை சூழல் மாறிலிகளாக சேமிப்போம். read விசையை நாம் public என்று அழைக்கிறோம் மற்றும் read/write விசை secret ஆகும். எடுத்துக்காட்டாக, நீங்கள் அவற்றை உங்கள் திட்டத்தின் root இல் உள்ள .env கோப்பில் சேர்க்கலாம்.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

வாடிக்கையாளர் பக்க உற்பத்தி சுற்றுச்சூழலுக்கு இரகசிய read/write API விசையை ஒருபோதும் வெளியிடமாட்டீர்கள் என்பதில் உறுதியாக இருங்கள்.

நாங்கள் மேலும் இரண்டு புறநிலையில் மாறிகள் சேர்க்கப்போகிறோம்: 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 விசைகளைக் கொண்டு ஒரு கிளையண்டை உருவாக்க வேண்டும். உதாரணமாக, /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 என்ற பெயரில் ஒரு கோப்பை உருவாக்கவும், இது எங்கள் பயன்பாட்டின் root layout ஆகும். இந்த பாதையில் Dynamic Routes பயன்படுத்தப்படும் ஒரு கோப்புறை உள்ளது என்பதை கவனிக்கவும், அதில் [locale] என்பது dynamic parameter ஆகும்.

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

revalidate மாறி Next.js-க்கு 60 விநாடிகள் கழித்து பக்கத்தை மீண்டும் உருவாக்கவும், உங்கள் மொழிபெயர்ப்புகளை புதுப்பித்து வைக்கவும் சொல்கிறது என்பதை கவனியுங்கள்.

படி 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), புதிய சரங்களை மொழிபெயர்ப்புக்கு அனுப்புவதற்காக இரகசிய 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 documentation இன் படி அமைக்க மறக்க வேண்டாம்.

கிளையண்டில், பயனர் விரும்பும் மொழியை மாற்ற locale குக்கீயை நீங்கள் மாற்றலாம். இதற்கான ஐடியாக்களுக்கு முழுமையான உதாரணக் குறியீட்டை பார்க்கவும்!

அடுக்கு 5: வெளியிடவும் சோதிக்கவும்!

நாம் முடித்து விட்டோம்! நீங்கள் Translate கூறுதலுக்கு எந்த உரைகளையும் சேர்க்கும் போது உங்கள் React பயன்பாடு தானாகவே மொழிபெயர்க்கப்படும். API விசையில் read/write அனுமதிகள் இருக்கும் சூழல்களில் மட்டுமே புதிய உரைகளை மொழிபெயர்க்க உருவாக்க முடியும் என்பதை நினைவில் வைத்துக் கொள்ளுங்கள். உங்கள் உற்பத்தி பயன்பாட்டை இவ்வாறு ஒரு API விசையுடன் சோதிக்க முடியும் என்ற வகையில் மூடப்பட்ட மற்றும் பாதுகாக்கப்பட்ட ஸ்டேஜிங் சூழலை வைத்துக்கொள்ள பரிந்துரைக்கிறோம், புதிய உரைகளை நேரலைக்கு செல்லும்முன் சேர்க்கலாம். இதனால் யாரும் உங்கள் இரகசிய API விசையை திருடுவதிலிருந்து தடைபடும், மேலும் உங்கள் மொழிபெயர்ப்பு திட்டத்தை சம்பந்தமற்ற புதிய உரைகளைச் சேர்க்குவதால் பெரிதாக ஆகாது.

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

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