App Router वापरणाऱ्या Next.js ऍप्लिकेशनमध्ये आंतरराष्ट्रीयीकरण कसे अंमलात आणायचे

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

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

ही मार्गदर्शिका त्या Next.js अनुप्रयोगांसाठी आहे जी App Router वापरत आहेत.
जर तुम्ही Pages 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 key आणि एक read/write key तयार करा. आपण त्यांना पर्यावरणीय चल (environment variables) म्हणून जतन करू. read key ला आपण public म्हणतो आणि read/write key ला 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. इथे origin विषयी अधिक वाचा.

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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

आम्ही लवकरच आपोआप TACOTRANSLATE_API_KEY आणि TACOTRANSLATE_PROJECT_LOCALE परिभाषित करणार आहोत.

क्लायंट वेगळ्या फाइलीत तयार करणे पुढे पुन्हा वापरण्यास सोपे बनवते. getLocales ही फक्त एक उपयोगिता फंक्शन आहे ज्यामध्ये काही अंतर्भूत त्रुटी हाताळणी आहे. आता, /app/[locale]/tacotranslate.tsx नावाची एक फाइल तयार करा, जिथे आपण TacoTranslate प्रदाता अंमलात आणू.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

कृपया लक्षात घ्या 'use client'; जे दर्शवते की हे एक क्लायंट कॉम्पोनंट आहे.

कंटेक्स्ट प्रोव्हायडर आता तयार असल्यामुळे, आपल्या अनुप्रयोगातील रूट लेआउटसाठी /app/[locale]/layout.tsx नावाचा एक फाईल तयार करा. लक्षात ठेवा की या मार्गात असा फोल्डर आहे जो Dynamic Routes वापरतो, जिथे [locale] हा डायनॅमिक पॅरामीटर आहे.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

इथली पहिली गोष्ट लक्षात घेण्यासारखी म्हणजे आपण आपल्या Dynamic Route पॅरामीटर [locale] चा वापर त्या भाषेसाठी भाषांतर घेण्यासाठी करत आहोत. याव्यतिरिक्त, generateStaticParams हे सुनिश्चित करत आहे की आपल्या प्रोजेक्टसाठी सक्रिय केलेले सर्व लोकल कोड पूर्वनिर्धारित आहेत.

आता, चला आपला पहिला पृष्ठ तयार करूया! /app/[locale]/page.tsx नावाचा एक फाइल तयार करा.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

कृपया लक्षात घ्या revalidate बदल, जो Next.js ला 60 सेकंदांनंतर पृष्ठ पुन्हा तयार करण्यास सांगतो, आणि आपले भाषांतर अद्ययावत ठेवतो.

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

TacoTranslate सर्व्हर साइड रेंडरिंगला समर्थन देते. यामुळे वापरकर्त्याचा अनुभव खूप सुधारतो कारण अनुवादित सामग्री लगेच दर्शविली जाते, त्याऐवजी प्रथम अनुवाद न केलेल्या सामग्रीचा क्षणिक अनुभव येतो. याव्यतिरिक्त, आम्ही क्लायंटवर नेटवर्क विनंत्या टाळू शकतो, कारण वापरकर्ता जे पृष्ठ पाहत आहे त्यासाठी आवश्यक असलेले अनुवाद आमच्याकडे आधीच असतात.

सर्व्हर साइड रेंडरिंग सेटअप करण्यासाठी, /next.config.js तयार करा किंवा बदल करा:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

तुमच्या सेटअपनुसार isProduction तपासणीमध्ये बदल करा. जर true असेल, तर TacoTranslate सार्वजनिक API की प्रदर्शित करेल. जर आपण स्थानिक, चाचणी किंवा स्टेजिंग वातावरणात असाल (isProduction is false), तर आम्ही गुप्त read/write API की वापरणार आहोत जेणेकरून नवीन स्ट्रिंग्ज भाषांतरासाठी पाठविल्या जाऊ शकतील.

मार्गनिर्देशन आणि पुनर्निर्देशन अपेक्षेनुसार काम करत असल्याची खात्री करण्यासाठी, आपल्याला /middleware.ts नावाचा एक फाइल तयार करावा लागेल. Middleware वापरून, आपण वापरकर्त्यांना त्यांच्या प्राधान्य असलेल्या भाषेत सादर केलेल्या पृष्ठांकडे पुनर्निर्देशित करू शकतो.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

खात्री करा की matcher हे Next.js Middleware दस्तऐवज नुसार सेट केले आहे.

क्लायंटवर, आपण वापरकर्त्याची आवडती भाषा बदलण्यासाठी locale कुकीमध्ये बदल करू शकता. कृपया पूर्ण उदाहरण कोड पाहा ज्यात यासाठीचे मार्ग दाखवले आहेत!

स्टेप ५: तैनात करा आणि चाचणी करा!

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

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

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