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

તે કેવી રીતે કાર્ય કરે

જ્યારે વિશ્વ વધુ વૈશ્વિક બનતું જાય છે, ત્યારે વેબ ડેવલપર્સ માટે વિવિધ દેશોના અને સંસ્કૃતિઓના વપરાશકર્તાઓને ધ્યાનમાં લઈ એપ્લિકેશન્સ બનાવવી越来越 મહત્વપૂર્ણ બની ગઈ છે. આ હાંસલ કરવાનો એક મુખ્ય રસ્તો આંતરરાષ્ટ્રીયકરણ (i18n) છે, જે તમને તમારી એપ્લિકેશનને વિવિધ ભાષાઓ, ચલણો અને તારીખ ફોર્મેટ્સ અનુસાર ગોઠવવાનો આધાર આપે છે.

આ ટ્યુટોરીયલમાં, આપણે તમારા React Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ કેવી રીતે ઉમેરવું તે જોઈએશું, સર્વર સાઇડ રેન્ડરિંગ સાથે. TL;DR: See the full example here.

આ માર્ગદર્શિકા Pages Router વાપરતી Next.js એપ્લિકેશન્સ માટે છે.
જો તમે App Router વાપરી રહ્યા હોય, તો કૃપા કરીને તેના માટે આ માર્ગદર્શિકા જુઓ.

પગલું 1: i18n લાઇબ્રેરી ઇન્સ્ટોલ કરો

તમારા Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ (internationalization) અમલમાં લાવવા માટે, આપણે પ્રથમ એક 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 કી ક્લાયન્ટ સાઇડ પ્રોડક્શન એન્વાયરનમેન્ટમાં લીક ન થાય.

આપણે બે વધુ environment variables પણ ઉમેરવાનું રહેશે: TACOTRANSLATE_DEFAULT_LOCALE અને TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ડિફૉલ્ટFallback લૉકલ કોડ. આ ઉદાહરણમાં, અમે તેને en English માટે સેટ કરીશું.
• TACOTRANSLATE_ORIGIN: તે “ફોલ્ડર” જ્યાં તમારી સ્ટ્રિંગ્સ સંગ્રહિત કરવામાં આવશે, જેમ કે તમારી વેબસાઇટનો URL. અહીં oorsprOrigins વિશે વધુ વાંચો.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

પગલું 3: TacoTranslate સુયોજિત કરવું

ટાકોટ્રાન્સલેટને તમારી એપ્લિકેશન સાથે સંકલિત કરવા માટે, તમારે પહેલાથી જ એપીઆઇ કીનો ઉપયોગ કરીને ક્લાયંટ બનાવવાની જરૂર પડશે. ઉદાહરણ તરીકે, /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 તમારા અનુવાદોના સર્વર સાઇડ રેન્ડરિંગની મંજૂરી આપે છે. આ صارفના અનુભવને ખૂબ સુધારે છે કારણ કે તે તરત જ અનુવાદિત સામગ્રી બતાવે છે, untranslated સામગ્રીનું ફ્લેશ દેખાવા સિવાય. તે ઉપરાંત, ક્લાઈન્ટ પર નેટવર્ક વિનંતિઓને તમને છોડાવી શકાય છે, કારણ કે અમારી પાસે પહેલેથી જ જરૂરિયાત પ્રમાણે બધા અનુવાદો উপলબ્ધ છે.

અમે શરૂ કરીશું /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, તો ટાકોટ્રાન્સલેટ જાહેર એપીઆઇ કીને સપાટી પર લાવશે. જો આપણે સ્થાનિક, પરીક્ષણ અથવા સ્ટેજિંગ વાતાવરણમાં (isProduction is false) હોઈએ, તો અમે અનુવાદ માટે નવા શબ્દમાળાઓ મોકલવામાં આવ્યા છે તેની ખાતરી કરવા માટે એપીઆઇ કી read/write ગુપ્તનો ઉપયોગ કરીશું.

અત્યારે સુધી, આપણે માત્ર Next.js એપ્લિકેશનને સમર્થિત ભાષાઓની સૂચિ સાથે સેટ કર્યું છે. આગળની રીત એ છે કે તમારી બધી પૃષ્ઠો માટે અનુવાદ મેળવવો. તે માટે, તમારી જરૂરિયાત અનુસાર, તમે getTacoTranslateStaticProps અથવા getTacoTranslateServerSideProps પૈકી કોઈ એકનો ઉપયોગ કરશો.

આ ફંક્શન્સ ત્રણ જથ્થાપત્ર લે છે: એક Next.js Static Props Context ઑબ્જેક્ટ, TacoTranslate માટે કૉન્ફિગરેશન, અને ঐચ્છિક Next.js ગુણધર્મો. નોંધો કે revalidate getTacoTranslateStaticProps પર ડિફૉલ્ટ તરીકે ૬૦ પર સેટ છે, જેથી તમારી અનુવાદો અપ-ટુ-ડેટ રહે.

કિસ્સે પૃષ્ઠમાં કોઈપણ ફંક્શનનો ઉપયોગ કરવા માટે, ચાલો માનીએ કે તમારી પાસે એક પૃષ્ઠ ફાઈલ છે જેમ કે /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!"/>
}

પગલું ૫: ડિપ્લોય કરો અને પરીક્ષણ કરો!

અમે સમાપ્ત કરી લીધું છે! જ્યારે તમે Translate ઘટકમાં કોઈ પણ સ્ટ્રિંગ્સ ઉમેરશો ત્યારે તમારું Next.js એપ્લિકેશન હવે સ્વચાલિત રીતે અનુવાદિત થઈ જશે. નોંધો કે API કી પર read/write પરવાનગીઓ ધરાવતી જ પરિસ્થિતિઓ જ નવા અનુવાદની માટેના સ્ટ્રિંગ્સ બનાવી શકશે. અમે સૂચન કરીશું કે તમારું પ્રોડક્શન એપ્લિકેશન આ પ્રકારની API કી સાથેClosed અને સુરક્ષિત સ્ટેજિંગ પરિસ્થિતિમાં પરિક્ષણ કરો અને લાઈવ જવા પહેલા નવા સ્ટ્રિંગ્સ ઉમેરો. આ કોઈને પણ તમારું ગુપ્ત API કી ચોરીવાથી રોકશે, અને સંભવિત રીતે નવા, અસંબંધીત સ્ટ્રિંગ્સ ઉમેરવાથી તમારું અનુવાદ પ્રોજેક્ટ ફૂંક્યા નહીં.

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

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