M

MLOG

Latviešu

Uzziniet, kā ieviest nevainojamu internacionalizāciju (i18n) savās Next.js lietotnēs, lai sasniegtu globālu auditoriju. Apskatīta maršrutēšana, satura tulkošana un labākās prakses.

Next.js Internacionalizācija: Daudzvalodu Lietotņu Veidošana Globālai Auditorijai

Mūsdienu savstarpēji saistītajā pasaulē lietotņu veidošana, kas paredzētas globālai auditorijai, vairs nav greznība – tā ir nepieciešamība. Next.js, jaudīgs React ietvars, nodrošina robustas funkcijas internacionalizācijas (i18n) ieviešanai, ļaujot jums izveidot daudzvalodu lietojumprogrammas, kas sniedz lokalizētu pieredzi lietotājiem visā pasaulē. Šis visaptverošais ceļvedis iepazīstinās jūs ar būtiskākajiem jēdzieniem, paņēmieniem un labākajām praksēm, lai veidotu internacionalizētas Next.js lietojumprogrammas.

Izpratne par Internacionalizāciju un Lokalizāciju

Pirms iedziļināties Next.js i18n specifikā, noskaidrosim galvenos terminus:

Būtībā i18n sagatavo jūsu lietojumprogrammu lokalizācijai. Atdalot no valodas atkarīgos elementus no pamatkoda, jūs atvieglojat lietotnes lokalizēšanu dažādiem tirgiem.

Kāpēc Ieviest Internacionalizāciju Next.js?

Ieviešot i18n savā Next.js lietojumprogrammā, jūs iegūstat daudzas priekšrocības:

Next.js i18n Funkcijas un Konfigurācija

Next.js piedāvā iebūvētu atbalstu i18n, izmantojot tā maršrutēšanas un satura pārvaldības funkcijas. Tālāk ir sniegts svarīgāko funkciju sadalījums:

1. i18n Konfigurēšana next.config.js Failā

Galvenā i18n konfigurācija atrodas next.config.js failā. Lūk, piemērs:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Atbalstīto lokāļu (valodu kodu) masīvs
    defaultLocale: 'en', // Noklusējuma lokāle, kas tiks izmantota
    localeDetection: true, // Iespējot/atspējot automātisku lokāles noteikšanu, pamatojoties uz pārlūka iestatījumiem (pēc izvēles)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Paskaidrojums:

2. Maršrutēšana ar Lokāles Prefiksiem

Next.js automātiski pievieno maršrutiem lokāles prefiksu. Piemēram, ja jums ir lapa /about un lokāle ir 'es' (spāņu), URL kļūs par /es/about. Tas ļauj izveidot dažādu valodu lapu versijas un ļauj meklētājprogrammām indeksēt saturu katrai lokālei. Ietvars pats pārvalda pāradresāciju un maršrutēšanu.

3. useRouter Hook Izmantošana

useRouter hook no next/router nodrošina piekļuvi pašreizējai lokālei un citai maršrutēšanas informācijai.


import { useRouter } from 'next/router';

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

  return (
    

      
Pašreizējā lokāle: {locale}

      
Pieejamās lokāles: {locales.join(', ')}

      
Noklusējuma lokāle: {defaultLocale}

    

  );
}

export default MyComponent;

router objekts piedāvā šādas galvenās īpašības:

Satura Tulkošanas Stratēģijas

Kad esat konfigurējis savu Next.js lietojumprogrammu priekš i18n, jums būs jāievieš satura tulkošanas stratēģijas. Šeit ir vairākas populāras pieejas:

1. Specializētas Tulkošanas Pārvaldības Sistēmas (TMS) Izmantošana

Liela mēroga projektiem ar daudzām valodām TMS ir ļoti ieteicama. Populāras iespējas ietver:

Priekšrocības:

2. JSON Tulkošanas Failu Izveide

Mazākiem projektiem JSON failu izmantošana tulkojumu glabāšanai ir vienkārša un efektīva metode.

Piemērs direktoriju struktūrai:


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

Piemērs en.json:


{
  "greeting": "Sveika, pasaule!",
  "welcomeMessage": "Laipni lūdzam mūsu vietnē."
}

Piemērs es.json:


{
  "greeting": "Sveika, pasaule!",
  "welcomeMessage": "Laipni lūdzam mūsu vietnē."
}

Piemērs 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;

Šī pieeja nodrošina elastību un ir vienkārša mazākiem projektiem. To parasti ir viegli atjaunināt un uzturēt.

3. Tulkošanas Bibliotēkas Izmantošana

Vairākas JavaScript bibliotēkas racionalizē satura tulkošanu jūsu React komponentos.

Piemērs ar next-i18next (Instalācija: npm install next-i18next i18next react-i18next):

Izveidojiet i18n konfigurācijas failu (piem., i18n.js jūsu saknes direktorijā):


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

Izveidojiet savu Next.js konfigurāciju priekš next-i18next.


// 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'],
  },
  // cita konfigurācija
}

module.exports = nextConfig

Pievienojiet konfigurāciju un tulkošanas importu savam _app.js failam:


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

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

export default appWithTranslation(MyApp);

Izveidojiet mapi un aizpildiet to ar lokālēm saviem tulkojumiem.


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

Piemērs en/common.json:


{
  "greeting": "Sveika, pasaule!",
  "welcomeMessage": "Laipni lūdzam mūsu vietnē."
}

Tulkojuma izmantošana komponentā:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Šis piemērs izmanto useTranslation hook, lai iegūtu tulkojumus, pamatojoties uz pašreizējo lokāli.

Dinamisko Maršrutu un Statiskās Vietnes Ģenerēšanas (SSG) Pārvaldība

Internacionalizācija kļūst sarežģītāka, strādājot ar dinamiskiem maršrutiem (piem., bloga ieraksti, produktu lapas) un statiskās vietnes ģenerēšanu (SSG).

1. Dinamiskie Maršruti (piem., /blog/[slug])

Dinamiskiem maršrutiem jums būs jāģenerē pareizie ceļi katrai lokālei būvēšanas laikā, izmantojot getStaticPaths. Šī funkcija atgriež ceļu masīvu, kurus Next.js vajadzētu iepriekš renderēt.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Iegūst bloga ierakstu datus

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

  return {
    paths,
    fallback: false, // vai 'blocking', ja vēlaties rādīt ielādes stāvokli
  };
}

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

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

Paskaidrojums:

2. Statiskās Vietnes Ģenerēšana (SSG) ar getStaticProps

getStaticProps funkcijā jūs varat iegūt tulkotu saturu, pamatojoties uz locale parametru.


export async function getStaticProps({ params, locale }) {
  // Iegūst saturu, pamatojoties uz lokāli un parametriem
  const { post } = await getPostBySlug(params.slug, locale);

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

Funkcijai getPostBySlug būtu jāiegūst tulkotais saturs dotajam slug un lokālei, ko varētu iegūt no jūsu tulkošanas failiem, datu bāzes vai CMS.

3. Servera Puses Renderēšana (SSR) ar getServerSideProps

Saturam, kas jāiegūst pieprasījuma laikā, izmantojiet getServerSideProps. Tas ir noderīgi, ja saturs bieži mainās vai tiek personalizēts katram lietotājam.


export async function getServerSideProps({ params, locale, req, res }) {
  // Iegūst datus, pamatojoties uz lokāli un parametriem (piem., no datu bāzes)
  const data = await fetchData(params.slug, locale);

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

Labākās Prakses Next.js Internacionalizācijai

Sekojot šīm labākajām praksēm, jūs varēsiet veidot robustas, uzturamas un lietotājam draudzīgas daudzvalodu lietojumprogrammas:

SEO Apsvērumi Internacionalizētām Tīmekļa Vietnēm

Jūsu internacionalizētās tīmekļa vietnes optimizēšana meklētājprogrammām ir būtiska, lai piesaistītu organisko trafiku no visas pasaules. Šeit ir dažas galvenās SEO labākās prakses:

Piemērs: Vienkārša Daudzvalodu Bloga Veidošana

Izveidosim vienkāršotu daudzvalodu bloga piemēru, izmantojot Next.js. Tas sniegs konkrētāku ilustrāciju tam, kā piemērot iepriekš apspriestos jēdzienus.

1. Projekta Iestatīšana

Izveidojiet jaunu Next.js projektu:


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

2. Konfigurējiet i18n (next.config.js)


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

module.exports = nextConfig

3. Izveidojiet Tulkošanas Failus

Izveidojiet locales mapi saknes direktorijā un pievienojiet šādus JSON failus:

locales/en.json:


{
  "title": "Laipni lūdzam manā blogā",
  "postTitle": "Mans pirmais ieraksts",
  "postContent": "Šis ir mana pirmā bloga ieraksta saturs."
}

locales/es.json:


{
  "title": "Laipni lūdzam manā blogā",
  "postTitle": "Mans pirmais ieraksts",
  "postContent": "Šis ir mana pirmā bloga ieraksta saturs."
}

locales/fr.json:


{
  "title": "Laipni lūdzam manā blogā",
  "postTitle": "Mans pirmais ieraksts",
  "postContent": "Šis ir mana pirmā bloga ieraksta saturs."
}

4. Izveidojiet Bloga Ieraksta Komponentu (piem., 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. Izveidojiet Sākumlapu (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;

Šis vienkāršotais piemērs demonstrē Next.js internacionalizācijas pamatprincipus. Jūs varat paplašināt šo pamata ietvaru, lai iekļautu sarežģītākas funkcijas, piemēram, dinamiskos maršrutus un integrāciju ar tulkošanas pārvaldības sistēmām. Apsveriet iespēju uzlabot iepriekš minētās saites ar Link komponentu un pievienot atbilstošo locale atribūtu.

6. Palaidiet Lietojumprogrammu

Palaidiet lietojumprogrammu ar:


npm run dev

Tagad jūs varat piekļūt savam blogam adresē http://localhost:3000 (angļu), http://localhost:3000/es (spāņu) un http://localhost:3000/fr (franču). Jums vajadzētu redzēt virsrakstu un bloga ieraksta saturu tulkotu atbilstoši izvēlētajai lokālei.

Noslēgums

Next.js nodrošina visaptverošu funkciju kopumu internacionalizācijas ieviešanai jūsu tīmekļa lietojumprogrammās. Sekojot šajā rokasgrāmatā izklāstītajiem principiem un paņēmieniem, jūs varat izveidot daudzvalodu lietojumprogrammas, kas sniedz lokalizētu pieredzi lietotājiem visā pasaulē. Atcerieties plānot savu i18n stratēģiju agri, izvēlēties savām vajadzībām atbilstošu tulkošanas metodi un prioritizēt lietotāja pieredzi. Ar rūpīgu plānošanu un izpildi jūs varat veidot lietojumprogrammas, kas rezonē ar globālu auditoriju un atver jaunas izaugsmes iespējas. Nepārtraukta mācīšanās, sekošana līdzi jaunākajiem izlaidumiem un labākajām praksēm nodrošinās, ka jūs efektīvi izmantojat savus rīkus un tehnoloģijas.

Tehnoloģijām attīstoties, sagaidāms, ka parādīsies vēl progresīvākas i18n funkcijas. Spēja sasniegt lietotājus dažādās kultūrās un lingvistiskajās grupās paliks galvenā prioritāte lietojumprogrammu izstrādātājiem visā pasaulē. Tāpēc i18n pamatu apguve ir vērtīga prasme, kas uzlabos jūsu vērtību mūsdienu globālajā izstrādes ainavā.

Next.js Internacionalizācija: Daudzvalodu Lietotņu Veidošana Globālai Auditorijai | MLOG