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

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

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

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

ચારમો પગલું: એક i18n લાઈબ્રેરી ઇન્સ્ટોલ કરો

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

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

આને તમારા ટર્મિનલમાં npm નો ઉપયોગ કરીને ઇન્સ્ટોલ કરીએ:

npm install tacotranslate

પગલું 2: 무료 TacoTranslate અકાઉન્ટ બનાવો

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

TacoTranslate એપ્લિકેશન UI માં, એક પ્રોજેક્ટ બનાવો, અને તેના API કી ટેબ પર જાઓ. એક read કી બનાવો, અને એક read/write કી બનાવો. આપણે તેને environment variables તરીકે સંગ્રહિતશું. read કીને અમે public કાીએ છીએ અને read/write કી secret કહેવાય છે. ઉદાહરણ તરીકે, તમે તેને તમારા પ્રોજેક્ટના રૂટમાં .env ફાઇલમાં જોઈ શકો છો.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ખાતરી કરો કે ગુપ્ત read/write API કી ક્યારેય ક્લાયંટ સાઇડ પ્રોડક્શન એન્ફ્રોન્મેન્ટ્સમાં લીક ન થાય.

અમે બે વધુ environment variables ઉમેરશું: TACOTRANSLATE_DEFAULT_LOCALE અને TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ડિફોલ્ટ ફોલબેક લોકેઇલ કોડ. આ ઉદાહરણમાં, અમે તેને અંગ્રેજી માટે en પર સેટ કરીશું.
• TACOTRANSLATE_ORIGIN: "ફોલ્ડર" જ્યાં vaše સ્ટ્રિંગ્સ સંગ્રહિત કરવામાં આવશે, જેમ કે તમારી વેબસાઇટનો 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 છે, તો કૃપા કરીને ઉપરથી પ્રોપર્ટીઝ અને કોડ સાથે પરિભાષાને વિસ્તૃત કરો.

ચરણ ૪: સર્વર સાઇડ રેન્ડરિંગ અમલમાં મૂકવું

TacoTranslate તમારા અનુવાદોના સર્વર સાઇડ રેન્ડરિંગની મંજૂરી આપે છે. આ uporabkar અનુભવને значительно સુધારે છે કારણ કે તરત જ અનુવાદિત સામગ્રી બતાવવામાં આવે છે, પહેલા અનઅનુવાદિત સામગ્રીનો ફ્લેશ ન દેખાય. તે ઉપરાંત, અમે ક્લાઈન્ટ પર નેટવર્ક વિનંતીઓને બચાવી શકીએ છીએ, કારણ કે અમારા પાસે પહેલેથી જ તમામ જરૂરી અનુવાદો موجود છે.

અમે શરૂ કરશું /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થી પણ વધારે ભાષાઓમાં લોકલાઇઝ પ્રયાસ કરી શકે છે. આજ જ શરુઆત કરો!