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 કી બનાવો. અમે તેમને પર્યાવરણ ચલ (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. અહીં 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 હોય, તો કૃપા કરીને ઉપર આપેલા ગુણધર્મો અને કોડ સાથે વ્યાખ્યાને વિસ્તૃત કરો.

પગલું 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.PUBLIC 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!