Pages Router பயன்படுத்தும் Next.js பயன்பாட்டில் பல்தொழிலீக மாற்றத்தை எப்படி அமல்படுத்துவது

உங்கள் React பயன்பாட்டை மேலும் அணுகக்கூடியதாக மாற்றி, பன்னாட்டு மொழியாக்கத்துடன் (i18n) புதிய சந்தைகளுக்கு পৌঁங்குங்கள்.

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

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

TACOTRANSLATE_DEFAULT_LOCALE: இயல்புநிலை பின்வாங்கும் பகுப்பாய்வு குறியீடு. இந்த உதாரணத்தில், அதை ஆங்கிலத்துக்காக en என அமைக்கப் போகிறோம்.
TACOTRANSLATE_ORIGIN: உங்கள் stringகள் சேமிக்கப்படும் “கோப்புறை”, உங்கள் இணையத்தள URL போன்றது. மூலங்கள் பற்றி மேலும் இங்கே படிக்கவும்.

.env

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

படி 3: TacoTranslate அமைக்குதல்

உங்கள் பயன்பாட்டுடன் TacoTranslate ஐ ஒருங்கிணைக்க, நீங்கள் முன்பு பெற்ற API விசைகளை பயன்படுத்தி ஒரு கிளையண்டை உருவாக்க வேண்டும். உதாரணமாக, /tacotranslate-client.js என்ற கோப்பை உருவாக்கவும்.

/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 வழங்குநரை சேர்ப்போம்.

/pages/_app.tsx

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

நாம் /next.config.js உருவாக்குவதிலோ அல்லது மாற்றுவதிலோ ஆரம்பிப்போம்.

/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 ஆக அமைக்கப்படுகின்றது, இதனால் உங்கள் afterமொழிபெயர்ப்புகள் புதுப்பிக்கப்பட்டிருக்கும்.

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

/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 கூறுகளிலும் உள்ள strings-களை மொழிபெயர்க்க Translate கூறை நீங்கள் பயன்படுத்த முடியும்.

import {Translate} from 'tacotranslate/react';

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

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

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