Next.js अॅप्ससाठी आंतरराष्ट्रीयीकरण (i18n) चे सर्वोत्तम समाधान

हे कसे काम करते

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!