Next.js अॅप्लिकेशनमध्ये जे Pages Router वापरत आहे त्यामध्ये आंतरराष्ट्रीयीकरण (internationalization) कसे अंमलात आणावे

जसे जग अधिक जागतिक होत आहे, तसेच वेब विकासकांसाठी वेगवेगळ्या देशांतील आणि संस्कृतीतील वापरकर्त्यांसाठी उपयुक्त अशी अनुप्रयोग तयार करणे अधिक महत्त्वाचे होत आहे. याचे प्रमुख मार्गांपैकी एक म्हणजे आंतरराष्ट्रीयीकरण (i18n), जे तुम्हाला तुमच्या अनुप्रयोगाला वेगवेगळ्या भाषांमध्ये, चलनांमध्ये आणि दिनांक स्वरूपांमध्ये सानुकूलित करण्यास सक्षम करते.

या ट्युटोरियलमध्ये, आपण पहाणार आहोत की तुमच्या React Next.js अनुप्रयोगात सर्व्हर साइड रेंडरिंगसह आंतरराष्ट्रीयीकरण कसे जोडायचे. TL;DR: येथे संपूर्ण उदाहरण पहा.

हा मार्गदर्शक Pages Router वापरणाऱ्या Next.js अनुप्रयोगांसाठी आहे.
जर आपण 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 कीज टॅबवर जा. एक 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 अनुप्रयोग कोणत्याही भाषेत पटकन आणि स्वयंचलितपणे स्थानिक करण्‍याची परवानगी देते. आजच सुरू करा!