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!