Next.js એપ્લિકેશનમાં જેમાં App Router ઉપયોગમાં આવી રહ્યો છે, આંતરરાષ્ટ્રીયકરણ (internationalization) કેવી રીતે અમલમાં લેવાય

જ્યારે દુનિયા વધુ વૈશ્વિક બની રહી છે, ત્યારે વેબ ડેવલપરો માટે વિવિધ દેશો અને સંસ્કૃતિઓના વપરાશકર્તાઓની જરૂરિયાતો માટે એપ્લિકેશન્સ બનાવવી વધુ મહત્વપૂર્ણ બની ગઈ છે. આ સિદ્ધિ મેળવવાનો એક મુખ્ય માર્ગ છે આંતરરાષ્ટ્રીયકરણ (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 કીઝ ટૅબ પર સાઇટ કરો. એક 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

અમે ટૂંક સમયમાં આપમેળે TACOTRANSLATE_API_KEY અને TACOTRANSLATE_PROJECT_LOCALE ને 定義 કરીશું.

ક્લાયન્ટ અલગ файl માં બનાવવું પછીથી ફરીથી ઉપયોગ માટે સરળ બનાવે છે. 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 સેકન્ડ પછી ફરીથી બનાવવું અને તમારી અનુવાદોને અપટુડેટ રાખવું.

કદમ ૪: સર્વર સાઇડ રેન્ડરિંગ અમલમાં લાવી રહ્યા છીએ

TacoTranslate સર્વર સાઇડ રેન્ડરિંગને સપોર્ટ કરે છે. આ vastly યુઝર અનુભવને સુધારે છે કારણ કે તે તરત જ અનુવાદિત સામગ્રી બતાવે છે, બદલે કે પહેલાં અનુવાદ ન થયેલી સામગ્રીનો ફલૅશ બતાવે. ઉપરાંત, અમે ક્લાઈન્ટ પર નેટવર્ક વિનંતિઓ છોડાવી શકીએ છીએ, કારણ કે અમારા પાસે પહેલેથી જ તે પૃષ્ઠ માટે જરૂરી અનુવાદો ઉપલબ્ધ છે કે જે પૃષ્ઠ વપરાશકર્તા જોઈ રહ્યો છે.

સર્વર સાઇડ રેન્ડરિંગ સેટ અપ કરવા માટે, /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 કૂકીને ફેરવી શકો છો જેથી વપરાશકર્તાની પસંદગીની ભાષા બદલાઈ જાય. કૃપા કરી આ માટેના વિચારો માટે સંપૂર્ણ ઉદાહરણ કોડ જુઓ!

સ્ટેપ 5: ડિપ્લોય અને પરીક્ષણ કરો!

અમે પૂર્ણ કરી લીધું! જ્યારે તમે કોઈપણ સ્ટ્રિંગ Translate કોમ્પોનન્ટમાં ઉમેરશો ત્યારે તમારું React એપ્લિકેશન હવે આપમેળે અનુવાદિત થવું શરૂ થઈ જશે. નોંધો કે માત્ર એવા પર્યાવરણો જ જેને API કી પર read/write પરવાનગીઓ મળી હોય તેઓ નવી અનુવાદ માટે સ્ટ્રિંગ્સ બનાવી શકશે. અમે સલાહ આપીએ છીએ કે તમારું ઉત્પાદન એપ્લિકેશન પરીક્ષણ માટે તમારે એક બંધ અને સુરક્ષિત સ્ટેજિંગ પર્યાવરણ હોય, જ્યાં તમે એવી API કી સાથે નવી સ્ટ્રિંગ્સ ઉમેરાવા પહેલા તેમનું પરીક્ષણ કરી શકો. આ કોઈને તમારી ગુપ્ત API કી ચોરવાનું અટકાવશે તેમજ તમારી અનુવાદ પ્રોજેક્ટમાં અનુરોધિત અને સંબંધિત ન રહેલા નવા સ્ટ્રિંગ્સ ઉમેરવાની શક્યતા ઘટાડશે.

અમે ખાતરી કરો કે તમે અમારા GitHub પ્રોફાઇલ પર સંપૂર્ણ ઉદાહરણ જોવો. ત્યાં, તમને Pages Router નો ઉપયોગ કરીને આ કેવી રીતે કરવું તેની પણ એક ઉદાહરણ મળશે! જો તમને કોઈ સમસ્યા આવે તો, નિઃસંકોચ સંપર્ક કરો, અને અમે મદદ કરવા માટે ખૂબ ખુશ થઇશું.

TacoTranslate આપના React એપ્લિકેશન્સને છટપટથી અને દ્રુતપણે કોઈપણ ભાષામાં અને ભાષામાંથી આપમેળે લોકલાઇઝ કરવા દે છે. આજથી જ શરૂ કરો!