Next.js એપ્લિકેશન્સ માટે આંતરરાષ્ટ્રીયકરણ (i18n) માટે શ્રેષ્ઠ ઉકેલ
શું તમે તમારા Next.js એપ્લિકેશનને નવા બજારોમાં વિસ્તૃત કરવા માંગો છો? TacoTranslate તમારા Next.js પ્રોજેક્ટને લોકલાઇઝ કરવાનું અદ્ભુત સરળ બનાવે છે, જે તમને વૈશ્વિક દર્શકો સુધી પહોંચવાનું સગવડ આપે છે બિનઝંઝટ વગર.
Next.js માટે TacoTranslate કેમ પસંદ કરવું?
- સતત સંકલન: ખાસ કરીને Next.js એપ્લિકેશન્સ માટે ડિઝાઇન કરેલું, TacoTranslate તમારા વર્તમાન વર્કફ્લો સાથે સરળતાથી સંકલિત થાય છે.
- સ્વચાલિત સ્ટ્રિંગ સંકલન: JSON ફાઇલોને મેન્યુઅલી મેનેજ કરવાનો વધુ ضرورت નથી. TacoTranslate તમારા કોડબેઝમાંથી સ્ટ્રિંગ્સ આપોઆપ એકત્રિત કરે છે.
- AI-સંપ્રેરિત અનુવાદ: AIની શક્તિને ઉપયોગમાં લઇ, કોન્ટેક્સ્ટ અનુસાર સચોટ અનુવાદ પ્રદાન કરે છે જે તમારા એપ્લિકેશનના ટોનને અનુકૂળ હોય.
- તાત્કાલિક ભાષા સહાય: માત્ર એક ક્લિકમાં નવી ભાષાઓ માટે ટેકો ઉમેરો, જેથી તમારું એપ્લિકેશન વિશ્વવ્યાપી સુલભ બને.
તે કેવી રીતે કામ કરે છે
જ્યારે દુનિયા વધુ વૈશ્વિક બની રહી છે, ત્યારે વેબ ડેવલપર્સ માટે વિવિધ દેશો અને સંસ્કૃતિઓના વપરાશકર્તાઓ માટે એપ્લિકેશન્સ બનાવવી વધુ મહત્વપૂર્ણ બની ગઈ છે. આ હાંસલ કરવાનો એક મુખ્ય માર્ગ આંતરરાષ્ટ્રીયકરણ (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
ધોરણ ૩: 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!"/>
}
પગલું ૫: ડિપ્લોઈ કરો અને પરીક્ષણ કરો!
અમે થઈ ગયા! જ્યારે તમે Translate
કમ્પોનન્ટમાં કોઈપણ સ્ટ્રિંગ્સ ઉમેરશો ત્યારે તમારું Next.js એપ્લિકેશન આપમેળે અનુવાદિત થઈ જશે. નોંધો કે ફક્ત તે પર્યાવરણોમાં જ read/write
પરવાનગીઓવાળો API કી સાથે નવિન સ્ટ્રિંગ્સ બનાવવા માટે સક્ષમ હશે. અમે સૂચવું છું કે તમારું પ્રોડક્શન એપ્લિકેશન આ પ્રકારની 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!