Pages Router பயன்படுத்தும் Next.js பயன்பாட்டில் சர்வதேசமயப்படுத்தலை எப்படி அமல்படுத்துவது

உலகம் மேலும் உலகமயமாகிவருவதையொட்டி, வெவ்வேறு நாடுகள் மற்றும் கலாச்சாரங்களிலிருந்து வரும் பயனர்களைச் சேவையளிக்கக்கூடிய பயன்பாடுகளை வலை டெவலப்பர்கள் உருவாக்குவது மேலும் அவசியமாகியுள்ளது. இதை சாதிக்க的重要மான வழிகளில் ஒன்றாக சர்வதேசீकरणம் (i18n) உள்ளது; இது உங்கள் செயலியை வெவ்வேறு மொழிகள், நாணயங்கள் மற்றும் தேதி வடிவங்களுக்கு ஏற்ப மாற்ற அனுமதிக்கிறது.

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

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

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

உங்கள் Next.js பயன்பாட்டில் பன்னாட்டு மொழி ஆதரவைக் செயல்படுத்த, முதலில் ஒரு 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: “folder” என்பது உங்கள் உரைகள் சேமிக்கப்படும் இடம், உதாரணமாக உங்கள் வலைத்தளத்தின் URL போன்றது. origins பற்றி மேலும் இங்கேப் படிக்கவும்.

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

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

நாம் /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: வெளியிடவும் மற்றும் சோதிக்கவும்!

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

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

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