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 टॅबवर जा. एक read की तयार करा, आणि एक read/write की तयार करा. त्यांना आम्ही पर्यावरणीय चल (environment variables) म्हणून जतन करू. read की म्हणजेच जे आम्ही public म्हणतो, तर read/write की म्हणजे secret. उदाहरणार्थ, तुम्ही त्यांना तुमच्या प्रकल्पाच्या मूळ फोल्डरमधील .env फाईलमध्ये जोडू शकता.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

कृपया खात्री करा की गोपनीय read/write API की कधीही क्लायंट साइड उत्पादन वातावरणात लीक होऊ नये.

आम्ही आणखी दोन पर्यावरण चल (environment variables) जोडणार आहोत: 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 असतील, तर कृपया वरिल गुणधर्म आणि कोडसह व्याख्या वाढवा.

चरण ४: सर्व्हर साइड रेंडरिंगची अंमलबजावणी

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 घटकात कोणतेही स्ट्रिंग्ज जोडाल, तेव्हा आपले React अॅप्लिकेशन आता स्वयंचलितपणे भाषांतरित होईल. लक्षात घ्या की API कीवरील read/write परवाने असलेल्या पर्यावरणातच नवीन स्ट्रिंग्ज तयार करू शकतात. आम्ही सुचवतो की आपल्याकडे एक बंद आणि सुरक्षित स्टेजिंग वातावरण असावे जेथे आपण आपल्या उत्पादन अॅप्लिकेशनला अशी API की वापरून तपासू शकता, नवीन स्ट्रिंग्ज जोडण्यापूर्वी. यामुळे कोणालाही आपली गुप्त API की चोरी करण्यापासून प्रतिबंध होईल आणि अनावश्यक, संबंधित नसलेली स्ट्रिंग्ज जोडून आपल्या भाषांतर प्रकल्पाचा अनावश्यक विस्तार होण्यापासून बचाव होईल.

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

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