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: இயல்புநிலை மீள்கொண்டறுக்கும் மொழிக் குறியீடு. இந்த எடுத்துக்காட்டில், அதனை en என்று ஆங்கிலத்திற்கு அமைக்க இருப்போம்.
• TACOTRANSLATE_ORIGIN: உங்கள் எழுத்துக்கள் சேமிக்கப்படும் "கோப்புறை", உதாரணத்திற்கு உங்கள் இணையதள URL போன்றது. இதோட(origins) பற்றி மேலதிகமாகப் படியுங்கள்.

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 யை பயன்படுத்துவீர்கள்.

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

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

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