एक Next.js एप्लिकेशन में अंतर्राष्ट्रीयकरण (internationalization) कैसे लागू करें जो Pages Router का उपयोग कर रहा हो।

जैसे-जैसे दुनिया अधिक वैश्विक होती जा रही है, वेब डेवलपर्स के लिए यह महत्वपूर्ण होता जा रहा है कि वे ऐसे एप्लिकेशन बनाएं जो विभिन्न देशों और संस्कृतियों के उपयोगकर्ताओं की सेवा कर सकें। इसे हासिल करने के प्रमुख तरीकों में से एक है अंतरराष्ट्रीयकरण (i18n), जो आपको अपनी एप्लिकेशन को विभिन्न भाषाओं, मुद्राओं, और तारीख़ के प्रारूपों के अनुसार अनुकूलित करने की अनुमति देता है।

इस ट्यूटोरियल में, हम यह जानेंगे कि अपने React Next.js एप्लिकेशन में सर्वर साइड रेंडरिंग के साथ अंतरराष्ट्रीयकरण कैसे जोड़ें। TL;DR: पूरा उदाहरण यहाँ देखें।

यह गाइड उन Next.js एप्लिकेशनों के लिए है जो Pages Router का उपयोग कर रहे हैं।
यदि आप App Router का उपयोग कर रहे हैं, तो कृपया इसके बजाय इस गाइड को देखें।

चरण 1: एक i18n लाइब्रेरी इंस्टॉल करें

अपने Next.js एप्लिकेशन में अंतरराष्ट्रीयकरण (internationalization) लागू करने के लिए, सबसे पहले हम एक i18n लाइब्रेरी चुनेंगे। कई लोकप्रिय लाइब्रेरीज़ हैं, जिनमें से एक है next-intl. हालांकि, इस उदाहरण में, हम TacoTranslate का उपयोग करेंगे।

TacoTranslate अत्याधुनिक AI का उपयोग करके आपके स्ट्रिंग्स को किसी भी भाषा में स्वतः अनुवादित करता है, और आपको JSON फाइलों के जटिल प्रबंधन से मुक्त करता है।

आइए इसे अपने टर्मिनल में npm का उपयोग करके इंस्टॉल करें:

npm install tacotranslate

स्टेप 2: एक मुफ्त TacoTranslate खाता बनाएं

अब जब आपने मॉड्यूल इंस्टॉल कर लिया है, तो अपना TacoTranslate खाता, एक अनुवाद परियोजना, और संबंधित API कुंजी बनाने का समय है। यहाँ एक खाता बनाएँ। यह मुफ्त है, और इसमें क्रेडिट कार्ड जोड़ने की आवश्यकता नहीं है।

TacoTranslate एप्लिकेशन UI के भीतर, एक परियोजना बनाएं, और इसके API keys टैब पर जाएं। एक read key बनाएं, और एक read/write key बनाएं। हम इन्हें environment variables के रूप में सहेजेंगे। read key को हम public कहते हैं और read/write key 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 सेटअप करना

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 एक, टैकोट्रांसलेट के लिए कॉन्फ़िगरेशन और वैकल्पिक 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 एप्लिकेशन को किसी भी भाषा में और वहां से स्वचालित रूप से जल्दी से स्थानीयकृत करने देता है। आज ही शुरू करें!