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

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

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

पायरी २: मोफत 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 की क्लायंट साइड उत्पादन वातावरणात उघडू नका.

आम्ही आणखी दोन पर्यावरणीय चल (environment variables) जोडू: TACOTRANSLATE_DEFAULT_LOCALE आणि TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: डीफल्ट फॉलबॅक लोकल कोड. या उदाहरणात, आपण ते इंग्रजीसाठी en म्हणून सेट करू.
• TACOTRANSLATE_ORIGIN: "फोल्डर" जिथे तुमच्या स्ट्रिंग्ज संग्रहित केल्या जातील, जसे तुमच्या वेबसाइटचा URL. इथून ओरिजिन्सबद्दल अधिक वाचा.

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

पाऊल ३: 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 प्रॉपर्टीज. लक्षात ठेवा की 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!"/>
}

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

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