Next.js பயன்பாட்டில் Pages Router பயன்படுத்தும் செயலியில் பன்னாட்டு மொழி ஆதரவை எப்படி நடைமுறைப்படுத்துவது

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

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

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

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

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

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

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

npm install tacotranslate

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

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

நாங்கள் மேலும் இரண்டு சுற்றுச்சூழல் மாறிலிகளைச் சேர்ப்போம்: TACOTRANSLATE_DEFAULT_LOCALE மற்றும் TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: இயல்புநிலை (fallback) மொழி குறியீடு. இந்த எடுத்துக்காட்டில், அதை ஆங்கிலத்திற்கு en என்று அமைப்போம்.
• TACOTRANSLATE_ORIGIN: உங்கள் strings சேமிக்கப்படும் "கோப்பகம்" — உதாரணமாக உங்கள் வலைத்தளத்தின் 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

நாங்கள் விரைவில் TACOTRANSLATE_API_KEY ஐ தானாக வரையறுத்துக் கொள்வோம்.

கிளையன்டை தனிப் கோப்பில் உருவாக்குவது பின்னர் அதை மீண்டும் பயன்படுத்த எளிதாக்கும். இப்போது, ஒரு தனிப்பயன் /pages/_app.tsx பயன்படுத்தி, நாம் TacoTranslate வழங்கியரை சேர்ப்போம்.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

உங்களிடம் ஏற்கனவே தனிப்பயன் pageProps மற்றும் _app.tsx இருந்தால், மேலே உள்ள பண்புகள் மற்றும் குறியீடுகளை கொண்டு வரையறையை நீட்டிக்கவும்.

படி 4: சர்வர்-சைடு ரெண்டரிங்கை செயல்படுத்துதல்

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

நாம் /next.config.js உருவாக்குவதோ அல்லது மாற்றுவதோ தொடங்குவோம்.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

உங்கள் அமைப்புக்கு ஏற்ப isProduction சரிபார்ப்பை மாற்றவும். true என்றால், TacoTranslate பொதுப் API விசையை வெளிக்காட்டும். நாம் உள்ளூர், சோதனை அல்லது ஸ்டேஜிங் சுற்றுச்சூழலில் இருந்தால் (isProduction is false), புதிய உரைகள் மொழிபெயர்ப்பிற்காக அனுப்பப்படுவதை உறுதிசெய்வதற்கு, ரகசிய read/write API விசையை பயன்படுத்துவோம்.

இன்னும்வரை, நாங்கள் Next.js பயன்பாட்டை ஆதரிக்கப்படும் மொழிகளின் பட்டியலுடன் மட்டுமே அமைத்துள்ளோம். அடுத்ததாக, உங்கள் அனைத்து பக்கங்களுக்கான மொழிபெயர்ப்புகளை பெறுவோம். அதற்காக, உங்கள் தேவைகளின் அடிப்படையில் getTacoTranslateStaticProps அல்லது getTacoTranslateServerSideProps ஒன்றை பயன்படுத்தலாம்.

இந்த செயல்பாடுகள் மூன்று arguments எடுக்கும்: ஒன்று Next.js Static Props Context பொருள், TacoTranslate கான கட்டமைப்பு, மற்றும் விருப்பமான Next.js பண்புகள். குறிப்பு: revalidate என்பது getTacoTranslateStaticProps இல் இயல்பாக 60 ஆக அமைக்கப்பட்டுள்ளது, ஆகவே உங்கள் மொழிபெயர்ப்புகள் புதுப்பிக்கப்பட்ட நிலைவில் இருக்கும்.

ஒரு பக்கத்தில் எந்த ஒரு செயல்பாட்டையும் பயன்படுத்த, உங்கள் பக்கக் கோப்பு /pages/hello-world.tsx போன்றதாக இருக்கிறது என்று கருதுவோம்.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

இப்போது உங்கள் அனைத்து React கூறுகளிலும் உள்ள தொடர்களை மொழிபெயர்க்க Translate கூறைப் பயன்படுத்த முடியும்.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

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

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

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

TacoTranslate உங்கள் React பயன்பாடுகளை 75-க்கும் மேற்பட்ட மொழிகளில் தானாகவே விரைவாக உள்ளூராக்க (localize) செய்ய உதவுகிறது. இன்றே தொடங்குங்கள்!