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

आपल्या React अनुप्रयोगाला अधिक प्रवेशयोग्य करा आणि आंतरराष्ट्रीयीकरण (i18n) सह नवीन बाजारपेठांपर्यंत पोहोच करा.

जसे जग अधिक जागतिकरित्या वाढत आहे, तशी वेब डेव्हलपरसाठी विविध देशांतील आणि संस्कृतीतील वापरकर्त्यांसाठी अनुप्रयोग तयार करणे अधिक महत्त्वाचे होत आहे. यासाठी एक महत्त्वाचा मार्ग म्हणजे आंतरराष्ट्रीयीकरण (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 की तयार करा आणि एक read/write की तयार करा. आम्ही त्यांना पर्यावरणीय चल म्हणून जतन करू. read कीला आपण public म्हणतो आणि read/write की ही secret असते. उदाहरणार्थ, तुम्ही त्या आपल्या प्रोजेक्टच्या मूळ फोल्डरमधील .env फाइलमध्ये जोडू शकता.

.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. इथून ऑरिजिन्स विषयी अधिक वाचा.

.env

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

पायरी ३: TacoTranslate सेट करणे

आपल्या अनुप्रयोगात TacoTranslate समाकलित करण्यासाठी, आपल्याला आधीच्या API कींचा वापर करून एक क्लायंट तयार करावा लागेल. उदाहरणार्थ, /tacotranslate-client.js नावाची फाईल तयार करा.

/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 प्रोव्हायडरची अंमलबजावणी करू.

/app/[locale]/tacotranslate.tsx

'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] हा डायनॅमिक पॅरामीटर आहे.

/app/[locale]/layout.tsx

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 नावाची एक फाईल तयार करा.

/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 सेकंदांनंतर पृष्ठ पुन्हा तयार करण्यास सांगते, आणि तुमच्या भाषांतरांना अद्ययावत ठेवते.

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

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

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

/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 वापरून, आपण वापरकर्त्यांना त्यांच्या पसंतीच्या भाषेत सादर केलेल्या पृष्ठांकडे पुनर्निर्देशित करू शकतो.

/middleware.ts

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 documentation च्या अनुरूप सेट अप करणे आवश्यक आहे.

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

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

आम्ही पूर्ण केले! जेव्हा आपण कोणतीही ओळी Translate कॉम्पोनंटमध्ये जोडता, तेव्हा तुमचे React application आपोआप अनुवादित होईल. लक्षात घ्या की फक्त त्यांच्या 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 Pages 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!