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

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

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

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

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

તમારા Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ (internationalization) અમલમાં મૂકવા માટે, અમે સૌપ્રથમ એક i18n લાઈબ્રેરી પસંદ કરીશું. ઘણા લોકપ્રિય લાઈબ્રેરીઝ છે, જેમાં next-intl પણ شامل છે. જોકે, આ ઉદાહરણમાં, અમે TacoTranslate નો ઉપયોગ કરીશું.

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

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

npm install tacotranslate

પગલું 2: એક મફત TacoTranslate એકાઉન્ટ બનાવો

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

TacoTranslate એપ્લિકેશન UI માં, એક પ્રોજેક્ટ બનાવો અને તેનું API કીઝ ટેબ ખાતે જાઓ. એક read કી અને એક read/write કી બનાવો. અમે તેમને એન્વાયર Runment 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 સેટઅપ કરવું

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 તમારા અનુવાદોના સર્વર સાઈડ રેન્ડરિંગ માટે મંજુર કરતું ਹੈ. આ વપરાશકર્તા અનુભવને મોટાપાયે સુધારે છે કારણ કે અનુવાદિત સામગ્રી તરત દેખાડે છે, untranslated સામગ્રીના પહેલા ફલેશની બદલે. વધુમાં, અમે ક્લાઈન્ટ પર નેટવર્ક વિનંતિઓ છોડાવી શકીએ છીએ, કારણ કે અમારી પાસે પહેલેથી જ તમામ જરૂરી અનુવાદો موجود છે.

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

ખાતરી કરો કે તમે અમારા GitHub پروફાઇલ પર પૂર્ણ ઉદાહરણ જોઈ લો. ત્યાં, તમને App Router નો ઉપયોગ કરીને આ કેવી રીતે કરવું તે પણ મળશે! જો તમને કોઇ સમસ્યા આવે, તો નિર્દ્વিধ રીતે અમારો સંપર્ક કરો, અને અમે ખુશીથી મદદ કરવા માટે તૈયાર છીએ.

TacoTranslate તમને તમારા React એપ્લિકેશન્સને કડી ભાષામાં અને કોઈપણ ભાષામાં આપમેળે લોકલાઇઝ કરવા દે છે. આજજ શરૂઆત કરો!