Next.js பயன்பாட்டில் Pages Router பயன்படுத்தும்போது சர்வதேசீகরণத்தை எப்படி செயல்படுத்துவது?

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

இந்த பாடத்தில், நாம் உங்கள் React Next.js செயலியுடன் சர்வர் பக்கத்தில் படமெடுத்தும் (server side rendering) அந்நாட்டார்த்தத்தை எப்படி சேர்ப்பது என்பதை ஆராயப்போகின்றோம். 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 keys தாவலை திறந்து செல்லவும். ஒரு 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!"/>
}

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

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

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

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