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

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

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

આ માર્ગદર્શન Next.js એપ્લિકેશન્સ માટે છે જે Pages Router નો ઉપયોગ કરી રહ્યા છે.
જો તમે 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. અહીં origins વિશે વધુ વાંચો.

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 પૈકી કોઈ એકનો ઉપયોગ કરશો.

આ ફંક્શન્સ ત્રણ દલીલો (arguments) લે છે: એક Next.js Static Props Context ઓબ્જેક્ટ, TacoTranslate માટેનું કોન્ફિગરેશન, અને વૈકલ્પિક Next.js પ્રોપર્ટીઝ. નોંધો કે getTacoTranslateStaticProps પર revalidate ડિફોલ્ટરૂપે 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 થી વધુ ભાષાઓમાં અને તેમાંથી ઝડપથી આપમેળે લોકલાઇઝ કરવાની મંજૂરી આપે છે. આજે જ શરૂ કરો!