Next.js செயலிகளில் சர்வதேசீகরণের (i18n) சிறந்த தீர்வு

எவ்வாறு வேலை செய்கிறது

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

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

இந்த வழிகாட்டி Pages Router பயன்படுத்தும் Next.js பயன்பாடுகளுக்கானது.
நீங்கள் App Router பயன்படுத்தினால், தயவுசெய்து இதற்குப் பதிலாக இந்த வழிகாட்டியைப் பாருங்கள்.

படி 1: ஒரு i18n நூலகத்தை நிறுவவும்

உங்கள் Next.js பயன்பாட்டில் சர்வதேசீக화를 செயல்படுத்த, முதலில் ஒரு i18n நூலகத்தை தேர்வு செய்வோம். பற்பல பிரபல நூலகங்கள் உள்ளன, அவற்றுள் next-intl ஒன்றாகும். இருப்பினும், இந்த எடுத்துக்காட்டில், நாம் TacoTranslate ஐ பயன்படுத்தப் போகிறோம்அ.

TacoTranslate உங்கள் உரைகளை எந்த மொழியிலும் தானாகவே cutting-edge AI மூலம் மொழிபெயர்க்கிறது, மேலும் JSON கோப்புகளை கையாள்வதில் ஏற்பட்ட இடர்பாடுகளை நீக்குகிறது.

இதனை உங்கள் டெர்மினலில் npm பயன்படுத்தி நிறுவுவோம்:

npm install tacotranslate

படி 2: இலவசமாக ஒரு TacoTranslate கணக்கை உருவாக்குங்கள்

இப்போ நீங்கள் மாட்யூல் நிறுவிவிட்டீர்கள், உங்கள் TacoTranslate கணக்கு, ஒரு மொழிமாற்றத் திட்டம் மற்றும் தொடர்புடைய API விசைகளை உருவாக்க நேரம் வந்துவிட்டது. இங்கே ஒரு கணக்கை உருவாக்கவும். இது இலவசம் மற்றும் கிரெடிட் கார்டு சேர்ப்பதற்குத் தேவையில்லை.

TacoTranslate பயன்பாட்டின் UI-இல், ஒரு திட்டத்தை உருவாக்கி, அதன் API விசைகளின் தாவலை நோக்குங்கள். ஒரு read விசையும், ஒரு read/write விசையும் உருவாக்குங்கள். அவைகளை சூழல் மாறிகளாக (environment variables) சேமிக்கப் போகிறோம். 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: இயல்பான தவிர்க்கும் மொழிக் குறியீடு. இந்த உதாரணத்தில், அதை ஆங்கிலத்திற்காக 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 பயன்படுத்த வேண்டும்.

இந்த செயல்பாடுகள் மூன்று arguments எடுத்துக்கொள்கின்றன: ஒரு 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: பரவச் செய்து பரிசோதிக்கவும்!

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

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

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