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

વિશ્વ વધુ વૈશ્વિક બનતાં જાય છે, તેથી વેબ ડેવલોપરો માટે વિવિધ દેશો અને સંસ્કૃતિઓના વપરાશકર્તાઓ માટે અનુકૂળ એપ્લિકેશન્સ બનાવવું વધુ મહત્વપૂર્ણ બની રહ્યું છે. આ હાંસલ કરવાનો એક મુખ્ય માર્ગ આંતરરાષ્ટ્રીયકરણ (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 keys ટેબ પર જાઓ. એક read કી બનાવો અને એક read/write કી બનાવો. અમે તેમને environment variables તરીકે સાચવીશું. 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 ગુણધર્મો. નોંધ કરો કે 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થી વધુ ભાષાઓમાં અને તેમાંથી આપમેળે લોકલાઇઝ કરવાની સગવડ આપે છે. આજે જ શરૂ કરો!