Next.js એપ્લિકેશન્સમાં આંતરરાષ્ટ્રીયકરણ (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 કીઝ ટેબ પર જાઓ. એક 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. અહીં ઓરિજિન્સ વિશે વધુ વાંચો.

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!