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

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

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

આ માર્ગદર્શિકા Pages Router વાપરી રહેલ Next.js એપ્લિકેશન્સ માટે છે۔
જો તમે App 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_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 થી વધુ ભાષાઓમાં ઝડપથી લોકલાઇઝ કરવામાં મદદ કરે છે. આજે શરૂ કરો!