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!"/>
}

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

काम पूर्ण झाले! आपले Next.js अनुप्रयोग आता Translate घटकात कोणतीही स्ट्रिंग जोडल्यावर स्वयंचलितपणे भाषांतरित होईल. लक्षात ठेवा की केवळ त्या वातावरणांना ज्यांच्याकडे 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!