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

जसे जग अधिक जागतिक बनते आहे, तसेच वेब विकसकांसाठी ही गोष्ट अधिक महत्त्वाची होते की ते असे ऍप्लिकेशन्स तयार करावीत जे वेगवेगळ्या देशांतील आणि संस्कृतीतील वापरकर्त्यांना सेवा देऊ शकतील. यासाठी एक महत्त्वाचा मार्ग म्हणजे आंतरराष्ट्रीयीकरण (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 की तयार करा. आम्ही त्यांना पर्यावरण चल变量 (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: डीफॉल्ट फallback स्थानिक कोड. या उदाहरणात, आपण ते इंग्रजीसाठी 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 वापराल.

या फंक्शन्सना तीन युक्ती (arguments) लागतात: एक Next.js Static Props Context ऑब्जेक्ट, TacoTranslate साठी कॉन्फिगरेशन, आणि ऐच्छिक Next.js प्रॉपर्टीज. लक्षात ठेवा की revalidate getTacoTranslateStaticProps वर पूर्वनिर्धारितपणे 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!"/>
}

पायरी ५: तैनात करा आणि चाचणी करा!

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

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

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