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

உங்கள் React பயன்பாட்டை சர்வதேசப்படுத்தல் (i18n) மூலம் மேலும் அணுகக்கூடியதாகச் செய்து புதிய சந்தைகளுக்கு அடையுங்கள்.

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

இந்த பயிற்சியில், நாங்கள் உங்கள் React Next.js பயன்பாட்டிற்கு சர்வதேசப்படுத்தலை (i18n) சர்வர்-சைட் ரெண்டரிங் உடன் சேர்க்குவது எப்படி என்பதை ஆராய்வோம். 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: இது இயல்புநிலையான fallback locale குறியீடு. இந்த உதாரணத்தில், அதை ஆங்கிலத்திற்காக en என அமைப்போம்.
TACOTRANSLATE_ORIGIN: உங்கள் strings சேமிக்கப்படும் “கோப்புறை” (folder), உதாரணமாக உங்கள் வலைத்தளத்தின் URL போன்றது. origin-கள் பற்றி மேலும் இங்கே படிக்கவும்.

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

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

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