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

નિશ્ચિત રીતે અમારા GitHub પ્રોફાઇલ પર સંપૂર્ણ ઉદાહરણ તપાસો. ત્યાં, તમને App Router નો ઉપયોગ કરીને આ કેવી રીતે કરવું તેનું ઉદાહરણ પણ મળશે! જો તમને કોઈ સમસ્યા આવે તો, નિઃસંકોચ સંપર્ક કરો, અને અમે ખુશીથી મદદ કરવા તૈયાર છીએ.

TacoTranslate તમને તમારી React એપ્લિકેશન્સને કોઈપણ ભાષામાં ઝડપી અને સ્વયંચાલિત રીતે સ્થાનિક બનાવવાની મંજૂરી આપે છે. આજથી શરૂ કરો!