Next.js એપ્સ માટે આંતરરાષ્ટ્રીયકરણ (i18n)નું શ્રેષ્ઠ ઉકેલ

તે કેવી રીતે કામ કરે છે

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

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

હવે તમે તમારા તમામ 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!