M

MLOG

Eesti

Õppige, kuidas rakendada sujuvat rahvusvahelistamist (i18n) oma Next.js rakendustes, et jõuda globaalse publikuni. Hõlmab marsruutimist, sisu tõlkimist ja parimaid tavasid.

Next.js-i rahvusvahelistamine: Mitmekeelsete rakenduste loomine globaalsele publikule

Tänapäeva ühendatud maailmas ei ole globaalsele publikule suunatud rakenduste loomine enam luksus – see on hädavajadus. Next.js, võimas Reacti raamistik, pakub robustseid funktsioone rahvusvahelistamise (i18n) rakendamiseks, võimaldades teil luua mitmekeelseid rakendusi, mis pakuvad lokaliseeritud kogemust kasutajatele üle maailma. See põhjalik juhend tutvustab teile olulisi kontseptsioone, tehnikaid ja parimaid tavasid rahvusvahelistatud Next.js rakenduste loomiseks.

Rahvusvahelistamise ja lokaliseerimise mõistmine

Enne Next.js-i i18n-i spetsiifikasse sukeldumist selgitame põhitermineid:

Sisuliselt valmistab i18n teie rakenduse lokaliseerimiseks ette. Eraldades keelesõltuvad elemendid põhikoodist, muudate rakenduse lokaliseerimise erinevatele turgudele lihtsamaks.

Miks rakendada rahvusvahelistamist Next.js-is?

i18n-i rakendamine teie Next.js rakenduses pakub mitmeid eeliseid:

Next.js-i i18n funktsioonid ja seadistamine

Next.js pakub sisseehitatud tuge i18n-ile oma marsruutimise ja sisuhalduse funktsioonide kaudu. Järgnev on oluliste funktsioonide jaotus:

1. i18n seadistamine failis next.config.js

i18n-i põhikonfiguratsioon asub failis next.config.js. Siin on näide:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Toetatud lokaatide (keelekoodide) massiiv
    defaultLocale: 'en', // Vaikimisi kasutatav lokaat
    localeDetection: true, // Luba/keela automaatne lokaadi tuvastamine brauseri seadete põhjal (valikuline)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Selgitus:

2. Marsruutimine lokaadi prefiksitega

Next.js lisab marsruutidele automaatselt lokaadi prefiksi. Näiteks, kui teil on leht aadressil /about ja lokaat on 'es' (hispaania keel), muutub URL-iks /es/about. See võimaldab lehtede erinevaid keeleversioone ja aitab otsingumootoritel indekseerida sisu iga lokaadi jaoks. Raamistik tegeleb teie eest ümbersuunamise ja marsruutimisega.

3. useRouter hook'i kasutamine

useRouter hook teegist next/router annab juurdepääsu praegusele lokaadile ja muule marsruutimisteabele.


import { useRouter } from 'next/router';

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

  return (
    

      
Praegune lokaat: {locale}

      
Saadaolevad lokaadid: {locales.join(', ')}

      
Vaikimisi lokaat: {defaultLocale}

    

  );
}

export default MyComponent;

router objekt pakub järgmisi olulisi omadusi:

Sisu tõlkimise strateegiad

Kui olete oma Next.js rakenduse i18n-i jaoks seadistanud, peate rakendama sisu tõlkimise strateegiad. Siin on mitu populaarset lähenemist:

1. Spetsiaalse tõlkehaldussüsteemi (TMS) kasutamine

Suuremahuliste ja paljude keeltega projektide puhul on TMS tungivalt soovitatav. Populaarsed valikud hõlmavad:

Eelised:

2. JSON tõlkefailide loomine

Väiksemate projektide puhul on JSON-failide kasutamine tõlgete salvestamiseks lihtne ja tõhus meetod.

Näidiskataloogi struktuur:


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

Näide en.json:


{
  "greeting": "Tere, maailm!",
  "welcomeMessage": "Tere tulemast meie veebisaidile."
}

Näide es.json:


{
  "greeting": "Tere, maailm!",
  "welcomeMessage": "Tere tulemast meie veebisaidile."
}

Näide 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;

See lähenemine pakub paindlikkust ja on väiksemate projektide jaoks otsekohene. Seda on üldiselt lihtne uuendada ja hooldada.

3. Tõlketeegi kasutamine

Mitmed JavaScripti teegid muudavad sisu tõlkimise teie Reacti komponentides sujuvamaks.

Näide teegiga next-i18next (Paigaldamine: npm install next-i18next i18next react-i18next):

Looge i18n-i konfiguratsioonifail (nt i18n.js oma juurkataloogis):


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

Looge oma Next.js-i konfiguratsioon next-i18next jaoks.


// 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'],
  },
  // muu konfiguratsioon
}

module.exports = nextConfig

Lisage konfiguratsioon ja tõlke import oma _app.js faili:


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

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

export default appWithTranslation(MyApp);

Looge kaust ja täitke see oma tõlgete lokaatidega.


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

Näide en/common.json:


{
  "greeting": "Tere, maailm!",
  "welcomeMessage": "Tere tulemast meie veebisaidile."
}

Tõlke kasutamine komponendis:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

See näide kasutab useTranslation hook'i tõlgete hankimiseks vastavalt praegusele lokaadile.

Dünaamiliste marsruutide ja staatilise saidi genereerimise (SSG) käsitlemine

Rahvusvahelistamine muutub keerulisemaks, kui tegeleda dünaamiliste marsruutidega (nt blogipostitused, tootelehed) ja staatilise saidi genereerimisega (SSG).

1. Dünaamilised marsruudid (nt /blog/[slug])

Dünaamiliste marsruutide jaoks peate ehitamise ajal genereerima iga lokaadi jaoks õiged teed, kasutades funktsiooni getStaticPaths. See funktsioon tagastab teede massiivi, mille Next.js peaks eelrenderdama.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Hangi blogipostituste andmed

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

  return {
    paths,
    fallback: false, // või 'blocking', kui soovite kuvada laadimise olekut
  };
}

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

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

Selgitus:

2. Staatilise saidi genereerimine (SSG) funktsiooniga getStaticProps

Funktsioonis getStaticProps saate hankida tõlgitud sisu, tuginedes parameetrile locale.


export async function getStaticProps({ params, locale }) {
  // Hangi sisu lokaadi ja parameetrite põhjal
  const { post } = await getPostBySlug(params.slug, locale);

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

Funktsioon getPostBySlug peaks hankima antud slugi ja lokaadi jaoks tõlgitud sisu, mille võib saada teie tõlkefailidest, andmebaasist või CMS-ist.

3. Serveripoolne renderdamine (SSR) funktsiooniga getServerSideProps

Sisu jaoks, mis tuleb hankida päringu ajal, kasutage funktsiooni getServerSideProps. See on kasulik, kui sisu muutub sageli või on iga kasutaja jaoks isikupärastatud.


export async function getServerSideProps({ params, locale, req, res }) {
  // Hangi andmed lokaadi ja parameetrite põhjal (nt andmebaasist)
  const data = await fetchData(params.slug, locale);

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

Next.js-i rahvusvahelistamise parimad tavad

Nende parimate tavade järgimine aitab teil luua robustseid, hooldatavaid ja kasutajasõbralikke mitmekeelseid rakendusi:

SEO kaalutlused rahvusvahelistatud veebisaitidele

Oma rahvusvahelistatud veebisaidi optimeerimine otsingumootoritele on oluline orgaanilise liikluse saamiseks üle maailma. Siin on mõned peamised SEO parimad tavad:

Näide: Lihtsa mitmekeelse blogi loomine

Loome lihtsustatud näite mitmekeelsest blogist, kasutades Next.js-i. See annab konkreetsema illustratsiooni, kuidas ülaltoodud kontseptsioone rakendada.

1. Projekti seadistamine

Looge uus Next.js projekt:


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

2. i18n seadistamine (next.config.js)


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

module.exports = nextConfig

3. Tõlkefailide loomine

Looge juurkataloogi kaust locales ja lisage järgmised JSON-failid:

locales/en.json:


{
  "title": "Tere tulemast minu blogisse",
  "postTitle": "Minu esimene postitus",
  "postContent": "See on minu esimese blogipostituse sisu."
}

locales/es.json:


{
  "title": "Tere tulemast minu blogisse",
  "postTitle": "Minu esimene postitus",
  "postContent": "See on minu esimese blogipostituse sisu."
}

locales/fr.json:


{
  "title": "Tere tulemast minu blogisse",
  "postTitle": "Minu esimene postitus",
  "postContent": "See on minu esimese blogipostituse sisu."
}

4. Blogipostituse komponendi loomine (nt 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. Avalehe loomine (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;

See lihtsustatud näide demonstreerib Next.js-i rahvusvahelistamise põhiprintsiipe. Saate seda põhilist raamistikku laiendada, et lisada keerukamaid funktsioone, nagu dünaamilised marsruudid ja integratsioon tõlkehaldussüsteemidega. Kaaluge ülaltoodud linkide täiustamist komponendiga Link ja lisage sobiv locale atribuut.

6. Rakenduse käivitamine

Käivitage rakendus käsuga:


npm run dev

Nüüd pääsete oma blogile juurde aadressidel http://localhost:3000 (inglise keel), http://localhost:3000/es (hispaania keel) ja http://localhost:3000/fr (prantsuse keel). Peaksite nägema, et pealkiri ja blogipostituse sisu on tõlgitud vastavalt valitud lokaadile.

Kokkuvõte

Next.js pakub laiaulatuslikku funktsioonide komplekti rahvusvahelistamise rakendamiseks oma veebirakendustes. Järgides selles juhendis kirjeldatud põhimõtteid ja tehnikaid, saate luua mitmekeelseid rakendusi, mis pakuvad lokaliseeritud kogemusi kasutajatele üle kogu maailma. Ärge unustage oma i18n strateegiat varakult planeerida, valida oma vajadustele sobiv tõlkemeetod ja seada esikohale kasutajakogemus. Hoolika planeerimise ja teostusega saate luua rakendusi, mis kõnetavad globaalset publikut ja avavad uusi kasvuvõimalusi. Pidev õppimine, uusimate väljalasete ja parimate tavadega kursis olemine tagab, et kasutate oma tööriistu ja tehnoloogiaid tõhusalt.

Tehnoloogia arenedes on oodata veelgi täiuslikumate i18n funktsioonide ilmumist. Võime jõuda kasutajateni erinevatest kultuuridest ja keelerühmadest jääb rakenduste arendajate jaoks ülemaailmselt oluliseks prioriteediks. Seetõttu on i18n-i aluste valdamine väärtuslik oskus, mis suurendab teie väärtust tänapäeva globaalses arendusmaastikul.

Next.js-i rahvusvahelistamine: Mitmekeelsete rakenduste loomine globaalsele publikule | MLOG