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

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

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

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

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

તમારા Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ (i18n) અમલમાં મૂકવા માટે, પહેલા આપણે એક 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 નો ઉપયોગ કરશો.

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