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 कीज टॅबवर जा. एक 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 कॉम्पोनेंटमध्ये कोणतेही स्ट्रिंग्ज जोडाल तेव्हा आपले 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!