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 की कधीच ग्राहक बाजूच्या उत्पादन वातावरणात लीक होऊ देऊ नका.

आम्ही आणखी दोन environment variables देखील जोडणार आहोत: 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 असतील, तर कृपया वरील प्रॉपर्टीज आणि कोडसह त्याचा विस्तार करा.

पाऊल ४: सर्व्हर साइड रेंडरिंगची अंमलबजावणी करणे

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: तैनात करा आणि चाचणी करा!

आम्ही पूर्ण केले! जेव्हा तुम्ही कोणतीही स्ट्रिंग Translate कॉम्पोनेंटमध्ये जोडाल तेव्हा तुमचे React ऍप्लिकेशन आता आपोआप अनुवादित केले जाईल. लक्षात ठेवा की API की वर read/write परवानग्या असलेल्या वातावरणांनाच नवीन स्ट्रिंग्ज तयार करण्याची क्षमता असेल. आम्ही शिफारस करतो की तुम्ही एक बंद आणि सुरक्षित स्टेजिंग वातावरण ठेवा जिथे तुम्ही तुमचे उत्पादन ऍप्लिकेशन अशा API कीसह चाचणी करू शकता, ज्या आधी नवीन स्ट्रिंग्ज जोडू शकतात. यामुळे कोणीही तुमची गुप्त API की चोरी होण्यापासून वाचेल आणि संभाव्यरित्या नवीन, अननिष्ट स्ट्रिंग्ज जोडून तुमच्या अनुवाद प्रकल्पाला फुगवणार नाही.

आमच्या GitHub प्रोफाईलवर पूर्ण उदाहरण नक्कीच पाहा. तेथे, तुम्हाला App Router वापरून हे कसे करायचे याचे एक उदाहरण देखील मिळेल! तुम्हाला काहीही अडचण आली तर, कृपया संपर्क करा, आणि आम्हाला मदत करण्यात आनंद होईल.

TacoTranslate तुम्हाला तुमच्या React अनुप्रयोगांना ७५ पेक्षा जास्त भाषांमध्ये जलदगतीने आपोआप स्थानिकीकरण करण्याची परवानगी देतो. आजच प्रारंभ करा!