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

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

જેમ જેમ পৃথিবী વધુ વૈશ્વિક બનતી જાય છે, વેબ ડેવલપર્સ માટે મહત્વપૂર્ણ થઇ રહ્યું છે કે તેઓ એવી એપ્લિકેશન્સ બનાવે જે વિવિધ દેશો અને સંસ્કૃતિઓના વપરાશકર્તાઓ માટે યોગ્ય હોય. આને સાકાર કરવાની એક મુખ્ય રીત છે આંતરરાષ્ટ્રીયકરણ (i18n), જે તમને તમારું એપ્લિકેશન વિવિધ ભાષાઓ, ચલણ અને તારીખ ફોર્મેટ્સ માટે અનુકૂળ બનાવવા દે છે.

આ માર્ગદર્શિકામાં, આપણે તે શીખીશું કે કેવી રીતે રિએક્ટ નેક્સ્ટ.js એપ્લિકેશનમાં સર્વર સાઇડ રેન્ડરિંગ સાથે આંતરરાષ્ટ્રીયકરણ ઉમેરવું. TL;DR: સંપૂર્ણ ઉદાહરણ અહીં જુઓ.

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

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

તમારા Next.js એપ્લિકેશનમાં આંતરરાષ્ટ્રીયકરણ લાગુ કરવાનું છે, તે માટે આપણે પહેલા એક i18n લાઇબ્રેરી પસંદ કરીશુ. કેટલીક લોકપ્રિય લાઇબ્રેરીઓ ઉપલબ્ધ છે, જેમાં next-intl પણ સમાવેશ થાય છે. જોકે, આ ઉદાહરણમાં, અમે TacoTranslate નો ઉપયોગ કરીશું.

TacoTranslate તમારી સ્ટ્રિંગ્સને કોઈપણ ભાષામાં કટિંગ-એજ AI ઉપયોગ કરીને આપમેળે અનુવાદ કરે છે, અને JSON ફાઇલોના ઝંઝાવાતી મેનેજમેન્ટથી તમને મુક્ત કરે છે.

આને તમારા ટર્મિનેલમાં npm ઉપયોગ કરીને ઇન્સ્ટોલ કરીએ:

npm install tacotranslate

કદમ ૨: મફત 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

પગલું ૩: 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!