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

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

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

हा मार्गदर्शक Next.js अनुप्रयोगांसाठी आहे जे Pages Router वापरत आहेत.
आपण App Router वापरत असल्यास, कृपया त्याऐवजी हा मार्गदर्शक पहा.

पाऊल 1: i18n लायब्ररी स्थापित करा

आपल्या Next.js अनुप्रयोगात आंतरराष्ट्रीयीकरण (i18n) अमलात आणण्यासाठी, आम्ही प्रथम एक i18n लायब्ररी निवडू. काही लोकप्रिय लायब्ररी उपलब्ध आहेत, ज्यात next-intl समाविष्ट आहे. परंतु या उदाहरणात, आम्ही TacoTranslate वापरणार आहोत.

TacoTranslate अत्याधुनिक AI वापरून आपले स्ट्रिंग्स कोणत्याही भाषेत स्वयंचलितपणे भाषांतरित करते आणि JSON फाइल्सच्या कंटाळवाण्या व्यवस्थापनापासून आपल्याला मुक्त करते.

चला ते आपल्या टर्मिनलमध्ये npm वापरून इन्स्टॉल करू:

npm install tacotranslate

चरण 2: विनामूल्य TacoTranslate खाते तयार करा

मॉड्यूल स्थापित केल्यानंतर, आता आपले TacoTranslate खाते, एक अनुवाद प्रकल्प आणि संबंधित API की तयार करण्याची वेळ आली आहे. येथे खाते तयार करा. हे मोफत आहे, आणि यासाठी तुम्हाला क्रेडिट कार्ड जोडण्याची आवश्यकता नाही.

TacoTranslate अनुप्रयोगाच्या UI मध्ये, एक प्रोजेक्ट तयार करा आणि त्याच्या API keys टॅबवर जा. Create one read key, and one read/write key. आम्ही त्यांना पर्यावरण चल (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!"/>
}

चरण 5: तैनात करा आणि चाचणी करा!

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

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

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