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

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

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

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

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

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

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

ચાલો તેને તમારા ટર્મિનલમાં npm દ્વારા ઇન્સ્ટોલ કરીએ:

npm install tacotranslate

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

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

TacoTranslate એપ્લિકેશન UI માં, એક પ્રોજેક્ટ બનાવો અને તેની API કીઝ ટેબ પર Navigate કરો. એક 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: તે “ફોલ્ડર” જ્યાં તમારી સ્ટ્રિંગ્સ સંગ્રહિત થنش, જેમ કે તમારી વેબસાઇટનો URL. અહીં ઓરિજિન્સ વિશે વધુ વાંચો.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

પગલું 3: TacoTranslate સેટઅપ કરવું

તમારા એપ્લિકેશન સાથે TacoTranslate ને એકીકૃત કરવા માટે, તમને પહેલા મળેલા API કીઝનો ઉપયોગ કરીને ક્લાયંટ બનાવવો પડશે. Beispielsweise, /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 getTacoTranslateStaticProps પર ડિફૉલ્ટ તરીકે ૬૦ સેટ થયેલ છે, જેથી તમારી અનુવાદો અપ-ટુ-ડેટ રહે.

કોઈ પણ ફંક્શનને પેજમાં ઉપયોગ કરવા માટે, માનીએ કે તમારી પાસે /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 components માં રહેલ સ્ટ્રિંગ્સને અનુવાદ કરવા માટે 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 એપ્લિકેશન્સ કોઇપણ ભાષામાં ઝડપી અને આપમેળે લોકેલાઈઝ કરવાની મંજૂરી આપે છે. આજે જ શરૂ કરો!