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

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

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 પ્રોપર્ટીઝ. નોંધો કે revalidate 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!"/>;
}

હવે તમે Translate ઘટકનો ઉપયોગ કરીને તમારા બધા React ઘટકોની અંદર રહેલા સ્ટ્રિંગ્સને અનુવાદ કરી શકો છો.

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