TacoTranslate
/
દસ્તાવેજીકરણદirect
 
લેખ
04 મે

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

શું તમે તમારા Next.js એપ્લિકેશનને નવા માર્કેટમાં વિસ્તૃત કરવા માંગો છો? TacoTranslate તમારા Next.js પ્રોજેક્ટને લોકલાઇઝ કરવાનું ખૂબ સરળ બનાવી આપે છે, જે તમને વિના ઝંઝટે વૈશ્વિક પ્રેક્ષકો સુધી પહોંચવાની સક્ષમતા આપે છે.

Next.js માટે TacoTranslate કેમ પસંદ કરવું?

  • સીમલેસ ઈન્ટિગ્રેશન: ખાસ કરીને Next.js એપ્લિકેશન્સ માટે ડિઝાઇન કરેલું, TacoTranslate સરળતાથી તમારા હાજર વર્કફ્લોમાં જોડાય છે.
  • સ્વચાલિત સ્ટ્રિગ સંગ્રહ: JSON ફાઇલો મેન્યુઅલી મેનેજ કરવાની જરૂર નથી. TacoTranslate આપોઆપ તમારા કોડબેઝમાંથી સ્ટ્રિંગ્સ એકત્ર કરે છે.
  • AI-સક્રિય અનુવાદ: AI ની શક્તિને ઉપયોગમાં લઈ તે અનુવાદ આપે છે જે તમારા એપ્લિકેશનના ટોન સાથે યોગ્ય રીતે મેળ ખાતા હોય.
  • તાৎકાલિક ભાષા સપોર્ટ: એક ક્લિકથી નવી ભાષાઓ માટે સપોર્ટ ઉમેરો, અને તમારી એપ્લિકેશનને વૈશ્વિક સ્તરે પહોંચનીય બનાવો.

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

જેમ જેમ পৃথিবী વધુ વૈશ્વિક બનતી જાય છે, વેબ ડેવલપર્સ માટે મહત્વપૂર્ણ થઇ રહ્યું છે કે તેઓ એવી એપ્લિકેશન્સ બનાવે જે વિવિધ દેશો અને સંસ્કૃતિઓના વપરાશકર્તાઓ માટે યોગ્ય હોય. આને સાકાર કરવાની એક મુખ્ય રીત છે આંતરરાષ્ટ્રીયકરણ (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 ફાઈલમાં ઉમેરવા શકો છો.

.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. અહીં ઓળખાણ વિશે વધુ વાંચો.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

પગલું ૩: TacoTranslate સેટઅપ કરવી

તમારા એપ્લિકેશન સાથે TacoTranslate ને એકત્રિત કરવા માટે, તમને અગાઉના API કીઓનો ઉપયોગ કરીને ક્લાયન્ટ બનાવવાની જરૂર પડશે. ઉદાહરણ તરીકે, /tacotranslate-client.js નામનું ફાઇલ બનાવો.

/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 પ્રોવાઇડર ઉમેરશું.

/pages/_app.tsx
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 બનાવવાનું અથવા સુધારવાનું શરૂ કરીશું.

/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 જેવી પાનું ફાઇલ છે.

/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!

Nattskiftet ની એક પ્રોડક્ટનોર્વેમાં બનાવેલ