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

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

நாம் ஆரம்பிப்பது /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 என்றவற்றில் ஒன்றைப் பயன்படுத்துவீர்கள்.

இந்த functions மூன்று arguments எடுக்கிறது: ஒன்று Next.js Static Props Context பொருள், TacoTranslate க்கான அமைப்பு, மற்றும் விருப்பமாக Next.js பண்புகள். getTacoTranslateStaticProps இல் revalidate இயல்பாக 60 ஆக அமைக்கப்பட்டுள்ளது, அதனால் உங்கள் மொழிபெயர்ப்புகள் நவீனமானவையாக இருக்கும்.

ஏதேனும் ஒரு function ஐ ஒரு பக்கத்தில் பயன்படுத்த, நீங்கள் /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: அமர்த்து சோதனை செய்யுங்கள்!

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