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

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

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

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

पाऊल 1: i18n लायब्ररी स्थापित करा

To implement internationalization in your Next.js application, we’ll first choose an i18n library. There are several popular libraries, including next-intl. However, in this example, we'll be using TacoTranslate.

TacoTranslate automatically translates your strings to any language using cutting-edge AI, and frees you from the tedious management of JSON files.

Let’s install it using npm in your terminal:

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

पाऊल 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!"/>
}

पायरी 5: तैनात करा आणि चाचणी करा!

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

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

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