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

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

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