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

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

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

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

இந்த வழிகாட்டு Next.js பயன்பாடுகளுக்கானது, அவை Pages Router பயன்படுத்துகின்றன.
நீங்கள் 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 விசைகளை உள்ளடக்கிய taba-வுக்கு செல்லவும். ஒரு 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 ஐ அமைத்தல்

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>
	);
}

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

import {Translate} from 'tacotranslate/react';

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

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

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