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

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

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

.env

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

அடி 3: TacoTranslate ஐ அமைத்தல்

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 உங்கள் மொழிபெயர்ப்புகளுக்கான சர்வர் பக்கம் ரெண்டரிங்கை 허ண்டு செய்கிறது. இது மாறிலி மொழிபெயர்க்காத உள்ளடக்கத்தின் உடனடி காட்சி பதிலாக உடனுக்குடன் மொழிபெயர்ப்பான உள்ளடக்கத்தை காட்டுவதன் மூலம் பயனர் அனுபவத்தை பெரிதும் மேம்படுத்துகிறது. கூடுதல olarak, நாங்கள் ஏற்கனவே தேவையான அனைத்து மொழிபெயர்ப்புகளையும் கொண்டிருப்பதால், கிளையண்ட் பக்கத்தில் நெட்வொர்க் கோரிக்கைகளை தவிர்க்க முடியும்.

நாம் ஆரம்பிப்பது /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 கூறுகளுக்குள் உள்ள கட்டங்களை மொழிபெயர்க்க Translate கூறினை பயன்படுத்தக்கூடியதாக இருக்க வேண்டும்.

import {Translate} from 'tacotranslate/react';

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

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

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