Next.js பயன்பாட்டில் Pages Router ஐ பயன்படுத்தி சர்வதேசமயமாக்கலை (internationalization) எப்படி அமல்படுத்துவது?

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

இந்த செயல்பாடுகள் மூன்று அளவுருக்களை ஏற்கின்றன: ஒன்று Next.js Static Props Context பொருள், TacoTranslate க்கான கட்டமைப்பு, மற்றும் விருப்பமான Next.js பண்புகள். குறிப்பு: getTacoTranslateStaticProps இல் revalidate இயல்பாக 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-க்கும் மேற்பட்ட மொழிகளுக்கு மற்றும் அவைகளிலிருந்து தானாகவே விரைவாக மொழிபெயர்க்க உதவுகிறது. இன்றே தொடங்கவும்!