M

MLOG

ગુજરાતી

તમારી Next.js એપ્લિકેશન્સમાં સરળ આંતરરાષ્ટ્રીયકરણ (i18n) કેવી રીતે લાગુ કરવું તે શીખો અને વૈશ્વિક પ્રેક્ષકો સુધી પહોંચો. આ માર્ગદર્શિકામાં રાઉટિંગ, સામગ્રી અનુવાદ અને શ્રેષ્ઠ પદ્ધતિઓનો સમાવેશ છે.

Next.js આંતરરાષ્ટ્રીયકરણ: વૈશ્વિક પ્રેક્ષકો માટે બહુભાષી એપ્સનું નિર્માણ

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

આંતરરાષ્ટ્રીયકરણ અને સ્થાનીયકરણને સમજવું

Next.js i18n ની વિગતોમાં ઊંડા ઉતરતા પહેલાં, ચાલો મુખ્ય શબ્દો સ્પષ્ટ કરીએ:

મૂળભૂત રીતે, i18n તમારી એપ્લિકેશનને સ્થાનીયકરણ માટે તૈયાર કરે છે. મુખ્ય કોડમાંથી ભાષા-આધારિત તત્વોને અલગ કરીને, તમે વિવિધ બજારો માટે એપ્લિકેશનને સ્થાનિક બનાવવાનું સરળ બનાવો છો.

Next.js માં આંતરરાષ્ટ્રીયકરણ શા માટે લાગુ કરવું?

તમારી Next.js એપ્લિકેશનમાં i18n લાગુ કરવાથી અસંખ્ય લાભો મળે છે:

Next.js i18n સુવિધાઓ અને રૂપરેખાંકન

Next.js તેની રાઉટિંગ અને કન્ટેન્ટ મેનેજમેન્ટ સુવિધાઓ દ્વારા i18n માટે બિલ્ટ-ઇન સપોર્ટ આપે છે. નીચે મહત્વપૂર્ણ સુવિધાઓનું વિભાજન છે:

1. next.config.js માં i18n રૂપરેખાંકિત કરવું

i18n માટેનું મુખ્ય રૂપરેખાંકન next.config.js ફાઇલમાં રહે છે. અહીં એક ઉદાહરણ છે:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // સમર્થિત લોકેલ્સ (ભાષા કોડ્સ) ની યાદી
    defaultLocale: 'en', // વાપરવા માટેનો ડિફોલ્ટ લોકેલ
    localeDetection: true, // બ્રાઉઝર સેટિંગ્સના આધારે સ્વચાલિત લોકેલ શોધને સક્ષમ/અક્ષમ કરો (વૈકલ્પિક)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

સમજૂતી:

2. લોકેલ પ્રીફિક્સ સાથે રાઉટિંગ

Next.js આપમેળે રૂટ્સને લોકેલ સાથે પ્રીફિક્સ કરે છે. ઉદાહરણ તરીકે, જો તમારી પાસે /about પર એક પેજ છે અને લોકેલ 'es' (સ્પેનિશ) છે, તો URL /es/about બની જશે. આ પેજના વિવિધ ભાષા સંસ્કરણોને સક્ષમ કરે છે અને સર્ચ એન્જિનને દરેક લોકેલ માટે સામગ્રીને ઇન્ડેક્સ કરવાની મંજૂરી આપે છે. ફ્રેમવર્ક તમારા માટે રીડાયરેક્ટ અને રાઉટિંગને હેન્ડલ કરે છે.

3. useRouter હૂકનો ઉપયોગ

next/router માંથી useRouter હૂક વર્તમાન લોકેલ અને અન્ય રાઉટિંગ માહિતીની ઍક્સેસ પ્રદાન કરે છે.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
વર્તમાન લોકેલ: {locale}

      
ઉપલબ્ધ લોકેલ્સ: {locales.join(', ')}

      
ડિફોલ્ટ લોકેલ: {defaultLocale}

    

  );
}

export default MyComponent;

router ઓબ્જેક્ટ નીચેની મુખ્ય પ્રોપર્ટીઝ ઓફર કરે છે:

સામગ્રી અનુવાદની વ્યૂહરચનાઓ

એકવાર તમે તમારી Next.js એપ્લિકેશનને i18n માટે રૂપરેખાંકિત કરી લો, પછી તમારે તમારી સામગ્રીના અનુવાદ માટે વ્યૂહરચનાઓ લાગુ કરવાની જરૂર પડશે. અહીં કેટલીક લોકપ્રિય પદ્ધતિઓ છે:

1. ડેડિકેટેડ ટ્રાન્સલેશન મેનેજમેન્ટ સિસ્ટમ (TMS) નો ઉપયોગ

ઘણી ભાષાઓવાળા મોટા પ્રોજેક્ટ્સ માટે, TMS ની ખૂબ ભલામણ કરવામાં આવે છે. લોકપ્રિય વિકલ્પોમાં શામેલ છે:

લાભો:

2. JSON અનુવાદ ફાઇલો બનાવવી

નાના પ્રોજેક્ટ્સ માટે, અનુવાદોને સંગ્રહિત કરવા માટે JSON ફાઇલોનો ઉપયોગ કરવો એ એક સરળ અને અસરકારક પદ્ધતિ છે.

ઉદાહરણ ડિરેક્ટરી માળખું:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

ઉદાહરણ en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

ઉદાહરણ es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

ઉદાહરણ MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

આ પદ્ધતિ સુગમતા પૂરી પાડે છે અને નાના પ્રોજેક્ટ્સ માટે સીધી છે. તેને અપડેટ અને જાળવવું સામાન્ય રીતે સરળ છે.

3. અનુવાદ લાઇબ્રેરીનો ઉપયોગ

કેટલીક જાવાસ્ક્રીપ્ટ લાઇબ્રેરીઓ તમારા રિએક્ટ કમ્પોનન્ટ્સમાં કન્ટેન્ટ ટ્રાન્સલેશનને સુવ્યવસ્થિત કરે છે.

next-i18next સાથેનું ઉદાહરણ (ઇન્સ્ટોલેશન: npm install next-i18next i18next react-i18next):

એક i18n રૂપરેખાંકન ફાઇલ બનાવો (દા.ત., તમારી રૂટ ડિરેક્ટરીમાં i18n.js):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

next-i18next માટે તમારું Next.js રૂપરેખાંકન બનાવો.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // અન્ય રૂપરેખાંકન
}

module.exports = nextConfig

તમારી _app.js માં રૂપરેખાંકન અને અનુવાદ ઇમ્પોર્ટ ઉમેરો:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

એક ફોલ્ડર બનાવો અને તેને તમારા અનુવાદો માટે લોકેલ્સ સાથે ભરો.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

ઉદાહરણ en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

એક કમ્પોનન્ટમાં અનુવાદનો ઉપયોગ કરવો:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

આ ઉદાહરણ વર્તમાન લોકેલના આધારે અનુવાદો મેળવવા માટે useTranslation હૂકનો ઉપયોગ કરે છે.

ડાયનેમિક રૂટ્સ અને સ્ટેટિક સાઇટ જનરેશન (SSG) ને હેન્ડલ કરવું

જ્યારે ડાયનેમિક રૂટ્સ (દા.ત., બ્લોગ પોસ્ટ્સ, પ્રોડક્ટ પેજીસ) અને સ્ટેટિક સાઇટ જનરેશન (SSG) સાથે કામ કરવામાં આવે છે, ત્યારે આંતરરાષ્ટ્રીયકરણ વધુ જટિલ બને છે.

1. ડાયનેમિક રૂટ્સ (દા.ત., /blog/[slug])

ડાયનેમિક રૂટ્સ માટે, તમારે બિલ્ડ સમયે દરેક લોકેલ માટે સાચા પાથ જનરેટ કરવા માટે getStaticPaths નો ઉપયોગ કરવાની જરૂર પડશે. આ ફંક્શન પાથની એક યાદી પરત કરે છે જેને Next.js એ પ્રી-રેન્ડર કરવું જોઈએ.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // બ્લોગ પોસ્ટ્સ ડેટા મેળવો

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // અથવા 'blocking' જો તમે લોડિંગ સ્ટેટ બતાવવા માંગતા હોવ
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

સમજૂતી:

2. getStaticProps સાથે સ્ટેટિક સાઇટ જનરેશન (SSG)

getStaticProps માં, તમે locale પેરામીટરના આધારે અનુવાદિત સામગ્રી મેળવી શકો છો.


export async function getStaticProps({ params, locale }) {
  // લોકેલ અને પેરામ્સના આધારે સામગ્રી મેળવો
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

getPostBySlug ફંક્શને આપેલ સ્લગ અને લોકેલ માટે અનુવાદિત સામગ્રી મેળવવી જોઈએ, જે તમારી અનુવાદ ફાઇલો, ડેટાબેઝ અથવા CMS માંથી મેળવી શકાય છે.

3. getServerSideProps સાથે સર્વર-સાઇડ રેન્ડરિંગ (SSR)

જે સામગ્રીને વિનંતી સમયે મેળવવાની જરૂર હોય, તેના માટે getServerSideProps નો ઉપયોગ કરો. આ ઉપયોગી છે જો સામગ્રી વારંવાર બદલાતી હોય અથવા દરેક વપરાશકર્તા માટે વ્યક્તિગત કરેલી હોય.


export async function getServerSideProps({ params, locale, req, res }) {
  // લોકેલ અને પેરામ્સના આધારે ડેટા મેળવો (દા.ત., ડેટાબેઝમાંથી)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Next.js આંતરરાષ્ટ્રીયકરણ માટે શ્રેષ્ઠ પદ્ધતિઓ

આ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરવાથી તમને મજબૂત, જાળવી શકાય તેવી અને વપરાશકર્તા-મૈત્રીપૂર્ણ બહુભાષી એપ્લિકેશન્સ બનાવવામાં મદદ મળશે:

આંતરરાષ્ટ્રીયકૃત વેબસાઇટ્સ માટે SEO વિચારણાઓ

સર્ચ એન્જિન માટે તમારી આંતરરાષ્ટ્રીયકૃત વેબસાઇટને ઓપ્ટિમાઇઝ કરવું એ વિશ્વભરમાંથી ઓર્ગેનિક ટ્રાફિક લાવવા માટે આવશ્યક છે. અહીં કેટલીક મુખ્ય SEO શ્રેષ્ઠ પદ્ધતિઓ છે:

ઉદાહરણ: એક સરળ બહુભાષી બ્લોગ બનાવવો

ચાલો Next.js નો ઉપયોગ કરીને એક બહુભાષી બ્લોગનું એક સરળ ઉદાહરણ બનાવીએ. આ ઉપર ચર્ચાયેલા ખ્યાલોને કેવી રીતે લાગુ કરવા તેનું વધુ નક્કર દૃષ્ટાંત પ્રદાન કરશે.

1. પ્રોજેક્ટ સેટઅપ

એક નવો Next.js પ્રોજેક્ટ બનાવો:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. i18n રૂપરેખાંકિત કરો (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. અનુવાદ ફાઇલો બનાવો

રૂટ ડિરેક્ટરીમાં એક locales ફોલ્ડર બનાવો અને નીચેની JSON ફાઇલો ઉમેરો:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. બ્લોગ પોસ્ટ કમ્પોનન્ટ બનાવો (દા.ત., components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. ઇન્ડેક્સ પેજ બનાવો (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

આ સરળ ઉદાહરણ Next.js આંતરરાષ્ટ્રીયકરણના મૂળભૂત સિદ્ધાંતો દર્શાવે છે. તમે આ મૂળભૂત માળખા પર વધુ જટિલ સુવિધાઓ, જેમ કે ડાયનેમિક રૂટ્સ અને અનુવાદ સંચાલન પ્રણાલીઓ સાથે સંકલન કરવા માટે વિસ્તરણ કરી શકો છો. ઉપરની લિંક્સને Link કમ્પોનન્ટ સાથે સુધારવાનું અને યોગ્ય locale એટ્રિબ્યુટ ઉમેરવાનું વિચારો.

6. એપ્લિકેશન ચલાવો

આની સાથે એપ્લિકેશન ચલાવો:


npm run dev

હવે તમે તમારા બ્લોગને http://localhost:3000 (અંગ્રેજી), http://localhost:3000/es (સ્પેનિશ), અને http://localhost:3000/fr (ફ્રેન્ચ) પર ઍક્સેસ કરી શકો છો. તમારે શીર્ષક અને બ્લોગ પોસ્ટની સામગ્રીને પસંદ કરેલા લોકેલના આધારે અનુવાદિત જોવી જોઈએ.

નિષ્કર્ષ

Next.js તમારી વેબ એપ્લિકેશન્સમાં આંતરરાષ્ટ્રીયકરણ લાગુ કરવા માટે સુવિધાઓનો એક વ્યાપક સેટ પૂરો પાડે છે. આ માર્ગદર્શિકામાં દર્શાવેલ સિદ્ધાંતો અને તકનીકોને અનુસરીને, તમે બહુભાષી એપ્લિકેશન્સ બનાવી શકો છો જે વિશ્વભરના વપરાશકર્તાઓને સ્થાનિક અનુભવો પ્રદાન કરે છે. તમારી i18n વ્યૂહરચનાનું વહેલું આયોજન કરવાનું, તમારી જરૂરિયાતો માટે યોગ્ય અનુવાદ પદ્ધતિ પસંદ કરવાનું અને વપરાશકર્તા અનુભવને પ્રાથમિકતા આપવાનું યાદ રાખો. સાવચેતીભર્યું આયોજન અને અમલીકરણ સાથે, તમે એવી એપ્લિકેશન્સ બનાવી શકો છો જે વૈશ્વિક પ્રેક્ષકો સાથે પડઘો પાડે અને વિકાસ માટે નવી તકો ખોલે. સતત શીખવું, નવીનતમ રિલીઝ અને શ્રેષ્ઠ પદ્ધતિઓ સાથે અપ-ટુ-ડેટ રહેવાથી ખાતરી થશે કે તમે તમારા સાધનો અને તકનીકોનો અસરકારક રીતે ઉપયોગ કરી રહ્યાં છો.

જેમ જેમ ટેક્નોલોજી આગળ વધશે, તેમ તેમ વધુ અદ્યતન i18n સુવિધાઓ ઉભરી આવવાની અપેક્ષા રાખો. વિવિધ સંસ્કૃતિઓ અને ભાષાકીય જૂથોના વપરાશકર્તાઓ સુધી પહોંચવાની ક્ષમતા વિશ્વભરના એપ્લિકેશન ડેવલપર્સ માટે મુખ્ય પ્રાથમિકતા રહેશે. તેથી, i18n ના મૂળભૂત સિદ્ધાંતોમાં નિપુણતા મેળવવી એ એક મૂલ્યવાન કૌશલ્ય છે જે આજના વૈશ્વિક વિકાસ પરિદ્રશ્યમાં તમારું મૂલ્ય વધારશે.

Next.js આંતરરાષ્ટ્રીયકરણ: વૈશ્વિક પ્રેક્ષકો માટે બહુભાષી એપ્સનું નિર્માણ | MLOG