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

ते कसे कार्य करते

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

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

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

पाऊल 1: i18n लायब्रेरी इंस्टॉल करा

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

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

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

npm install tacotranslate

पायरी 2: एक मोफत TacoTranslate खाते तयार करा

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

TacoTranslate ॲप्लिकेशन UI मध्ये, एक प्रोजेक्ट तयार करा आणि त्याच्या API keys टॅबवर जा. एक read की आणि एक read/write की तयार करा. आपण त्या पर्यावरणातील व्हेरिएबल्स म्हणून जतन करू. 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. इथे origin विषयी अधिक वाचा.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

पायरी ३: TacoTranslate सेट करणे

टॅकोट्रान्सलेट आपल्या अनुप्रयोगासह समाकलित करण्यासाठी, आपल्याला आधीपासून एपीआय की वापरुन क्लायंट तयार करणे आवश्यक आहे. उदाहरणार्थ, /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 असतील, तर कृपया वर दिलेल्या गुणधर्म आणि कोडसह त्याची व्याख्या विस्तृत करा.

टप्पा ४: सर्व्हर साइड रेंडरिंग अमलात आणणे

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 डिफॉल्टने ६० वर सेट आहे, जेणेकरून तुमच्या भाषांतरांना अद्ययावत ठेवले जाईल.

या पैकी कोणताही फंक्शन एखाद्या पेजमध्ये वापरण्यासाठी, समजूया की तुमच्याकडे /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!"/>
}

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

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

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

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