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

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

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

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

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

તમારા Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ (internationalization) અમલમાં લાવવા માટે, આપણે સૌપ્રથમ એક 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 ફાઇલમાં ઉમેરી શકો છો.

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_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 હોય, તો કૃપા કરીને ઉપર આપેલા ગુણધર્મો અને કોડ સાથે પરિભાષા વિસ્તૃત કરો.

પગલું 4: સર્વર-સાઇન રેન્ડરિંગ અમલમાં લાવવું

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 ગુણધર્મો. નોંધો કે revalidate getTacoTranslateStaticProps પર ડિફોલ્ટ તરીકે 60 પર સેટ છે, જેથી તમારા અનુવાદ અપ-ટુ-ડેટ રહે.

પેજમાં કોઈપણ ફંક્શનનો ઉપયોગ કરવા માટે, ધરો કે તમારી પાસે એવી પેજ ફાઈલ છે /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 કોમ્પોનેન્ટમાં કોઈપણ સ્ટ્રિંગ્સ ઉમેરશો ત્યારે તમારું React એપ્લિકેશન હવે આપમેળે અનુવાદિત કરવામાં આવશે. નોંધ કરો કે માત્ર એવા પર્યાવરણો જ જેમને API કી પર read/write પરવાનગી હોય, તે નવા અનુવાદ માટે સ્ટ્રિંગ્સ બનાવી શકશે. અમે સૂચવીએ છીએ કે તમે એક બંધ અને સલામત સ્ટેજિંગ પર્યાવરણ રાખો જ્યાં તમે એવી API કી સાથે તમારા પ્રોડક્શન એપ્લિકેશનનું પરીક્ષણ કરી શકો અને લાઈવ થવામાં પહેલા નવા સ્ટ્રિંગ્સ ઉમેરો. આથી કોઈ પણ વ્યક્તિ તમારી ગુપ્ત API કી ચોરી નહીં કરી શકે, અને સંભવતઃ અનસંબંધિત નવા સ્ટ્રિંગ્સ ઉમેરવાથી તમારા અનુવાદ પ્રોજેક્ટનું અનાવશ્યક ફૂલો રોકાશે.

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

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