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: உங்கள் உரைகள் சேமிக்கப்படும் “கோப்புறை”, உதாரணமாக உங்கள் வலைத்தளத்தின் URL. மூலங்கள் பற்றி மேலும் இங்கே படிக்கவும்.

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

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

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

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

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

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