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

જ્યારે દુનિયા વધુ વૈશ્વિક અને જોડાઈ રહી છે, ત્યારે વેબ ડેવલપરો માટે વિવિધ દેશો અને સંસ્કૃતિઓના વપરાશકર્તાઓ માટે એપ્લિકેશન્સ બનાવવી વધુ મહત્વપૂર્ણ બની રહી છે. આ પ્રાપ્ત કરવાની મુખ્ય રીતોમાંથી એક છે આંતરરાષ્ટ્રીયકરણ (i18n), જે તમને તમારા એપ્લિકેશનને વિવિધ ભાષાઓ, ચલણો અને તારીખ ફોર્મેટ્સ માટે અનુરૂપ બનાવવા દે છે.

આ લેખમાં, અમે તમારા React Next.js એપ્લિકેશનમાં સર્વર સાઇડ રેન્ડરિંગ સાથે આંતરરાષ્ટ્રીયકરણ કેવી રીતે ઉમેરવું તે શોધીશું. TL;DR: સંપૂર્ણ ઉદાહરણ અહીં જુઓ.

આ માર્ગદર્શિકા માટે છે Next.js એપ્લિકેશન માટે જે App Router નો ઉપયોગ કરે છે.
જો તમે Pages Router નો ઉપયોગ કરો છો, તો આ માર્ગદર્શિકા બદલે જુઓ.

પગલું 1: i18n લાઇબ્રેરી ઇન્સ્ટોલ કરો

તમારા Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ અમલમાં લાવવા માટે, અમે પહેલા એક i18n લાઇબ્રેરી પસંદ કરીશું. ઘણા લોકપ્રિય લાઇબ્રેરીઝ છે, જેમાં next-intl પણ સામેલ છે. જોકે, આ ઉદાહરણમાં, અમે TacoTranslate નો ઉપયોગ કરીશું.

TacoTranslate તમારા સ્ટ્રિંગ્સને કટીંગ એજ AI દ્વારા Automatic રૂપે કોઈ પણ ભાષામાં અનુવાદિત કરે છે, અને JSON ફાઇલ્સના હતાશાજનક મેનેજમેન્ટથી તમને મુક્ત કરે છે.

આને તમારી ટર્મિનેલમાં npm દ્વારા ઇન્સ્ટોલ કરીએ:

npm install tacotranslate

પગલું 2: એક મુક્ત TacoTranslate એકાઉન્ટ બનાવો

હવે તમે મોડ્યૂલ ઇન્સ્ટોલ કરી લીધો છે, તો હવે તમારી TacoTranslate એકાઉન્ટ, એક અનુવાદ પ્રોજેક્ટ અને સંબંધિત API કીઓ બનાવવાનો સમય આવી ગયો છે. અહીં એકાઉન્ટ બનાવો. આ મફત છે, અને તમારે ક્રેડિટ કાર્ડ ઉમેરવાની જરૂર નથી.

TacoTranslate એપ્લિકેશન UI માં, એક પ્રોજેક્ટ બનાવો અને તેના API કીઝ ટેબ પરNavigate કરો. એક 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

પગલું ૩: 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 સર્વર સાઇડ રેન્ડરિંગને समर्थन કરે છે. આ વપરાશકર્તા અનુભવને ઘણી હદ સુધી સુધારે છે કારણ કે તે અનuvadિત સામગ્રી તરત જ બતાવે છે, પહેલા અજાહેર થયેલી અસફળ સામગ્રીના ઝલકમાં નહિ. ઉપરાંત, અમે ક્લાયન્ટ પર નેટવર્ક વિનંતીઓ ટાળી શકીએ છીએ, કારણ કે અમારી પાસે પહેલેથી જ તે પૃષ્ઠ માટે જરૂરી ભાષાંતરો છે જે વપરાશકર્તા જોઈ રહ્યો છે.

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