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

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

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

हा मार्गदर्शक Pages Router वापरणाऱ्या Next.js अनुप्रयोगांसाठी आहे.
जर आपण 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 की तयार करा. आम्ही त्यांना पर्यावरणीय चल म्हणून जतन करू. 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

पाऊल ३: TacoTranslate सेट करणे

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 ऑब्जेक्ट, टॅकोट्रान्सलेटसाठी कॉन्फिगरेशन आणि वैकल्पिक 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 घटकात जोडाल तेव्हा तुमचे React अनुप्रयोग स्वयंचलितपणे भाषांतरित केले जाईल. लक्षात घ्या की API कीवर read/write अधिकार असलेल्या फक्त पर्यावरणांनाच नवीन भाषांतरासाठी स्ट्रींग तयार करता येतील. आम्ही तुम्हाला अशा बंद आणि सुरक्षित स्टेजिंग पर्यावरणाची शिफारस करतो जिथे तुम्ही तुमचे उत्पादन अनुप्रयोग API कीसह चाचणी करू शकता, लाईव्ह होण्याआधी नवीन स्ट्रींग्स जोडू शकता. यामुळे कोणालाही तुमची गुप्त API की कॉपी करण्यापासून रोखता येईल आणि संभाव्यपणे अनावश्यक नवीन स्ट्रींग्स जोडून तुमच्या भाषांतर प्रकल्पाचा आकार वाढण्यापासूनही प्रतिबंध करता येईल.

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

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