Pages Router वापरणाऱ्या Next.js अनुप्रयोगात आंतरराष्ट्रीयीकरण कसे राबवायचे

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

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

हा मार्गदर्शक Next.js अनुप्रयोगांसाठी आहे जे Pages Router वापरत आहेत.
जर आपण 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: डीफॉल्ट फॉलबॅक लोकल कोड. या उदाहरणात, आम्ही ते 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 असतील, तर वर दिलेल्या गुणधर्म आणि कोडसह परिभाषा विस्तारित करा.

चरण 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 ऑब्जेक्ट, 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 अ‍ॅप्लिकेशन आता स्वयंचलितपणे भाषांतरित होईल. लक्षात घ्या की फक्त अशाच वातावरणांना, ज्यांना API कीवर read/write परवानग्या आहेत, नवीन भाषांतरासाठी स्ट्रिंग तयार करण्याची परवानगी असेल. आम्ही शिफारस करतो की एक बंद आणि सुरक्षित स्टेजिंग वातावरण ठेवावे जिथे आपण अशा API कीसह आपल्या प्रॉडक्शन अ‍ॅप्लिकेशनची चाचणी करू शकता आणि जिवंत करण्यापूर्वी नवीन स्ट्रिंग जोडू शकता. हे कोणालाही कोणालाही आपल्या गुप्त API की चोरून जाण्यापासून वाचवेल, आणि संभाव्यतः नवीन, असंबंधित स्ट्रिंग जोडून आपल्या अनुवाद प्रकल्पाचा आकार वाढण्यापासून रोखेल.

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

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