M

MLOG

Lietuvių

Sužinokite, kaip įdiegti sklandžią internacionalizaciją (i18n) savo Next.js aplikacijose, kad pasiektumėte pasaulinę auditoriją. Apima maršrutizavimą, turinio vertimą ir geriausias praktikas.

Next.js internacionalizacija: daugiakalbių programėlių kūrimas pasaulinei auditorijai

Šiuolaikiniame tarpusavyje susijusiame pasaulyje programėlių, skirtų pasaulinei auditorijai, kūrimas nebėra prabanga – tai būtinybė. Next.js, galinga React karkaso sistema, suteikia tvirtas funkcijas internacionalizacijai (i18n) įdiegti, leidžiančias kurti daugiakalbes programėles, kurios teikia lokalizuotą patirtį vartotojams visame pasaulyje. Šis išsamus vadovas supažindins jus su esminėmis sąvokomis, technikomis ir geriausiomis praktikomis, kaip kurti internacionalizuotas Next.js programėles.

Internacionalizacijos ir lokalizacijos supratimas

Prieš pradedant gilintis į Next.js i18n specifiką, išsiaiškinkime pagrindinius terminus:

Iš esmės, i18n paruošia jūsų programėlę lokalizacijai. Atskirdami nuo kalbos priklausančius elementus nuo pagrindinio kodo, palengvinate programėlės lokalizavimą skirtingoms rinkoms.

Kodėl verta diegti internacionalizaciją naudojant Next.js?

i18n diegimas jūsų Next.js programėlėje suteikia daugybę privalumų:

Next.js i18n funkcijos ir konfigūracija

Next.js siūlo integruotą i18n palaikymą per savo maršrutizavimo ir turinio valdymo funkcijas. Toliau pateikiama svarbių funkcijų apžvalga:

1. i18n konfigūravimas faile next.config.js

Pagrindinė i18n konfigūracija yra faile next.config.js. Štai pavyzdys:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Palaikomų lokalių (kalbų kodų) masyvas
    defaultLocale: 'en', // Numatytasis lokalės nustatymas
    localeDetection: true, // Įjungti/išjungti automatinį lokalės aptikimą pagal naršyklės nustatymus (neprivaloma)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Paaiškinimas:

2. Maršrutizavimas su lokalės priešdėliais

Next.js automatiškai prideda lokalės priešdėlį prie maršrutų. Pavyzdžiui, jei turite puslapį /about ir lokalė yra 'es' (ispanų), URL taps /es/about. Tai leidžia turėti skirtingų kalbų puslapių versijas ir paieškos sistemoms indeksuoti turinį kiekvienai lokalei. Karkasas pats pasirūpina peradresavimu ir maršrutizavimu.

3. useRouter kabliuko (Hook) naudojimas

useRouter kabliukas iš next/router suteikia prieigą prie dabartinės lokalės ir kitos maršrutizavimo informacijos.


import { useRouter } from 'next/router';

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

  return (
    

      
Dabartinė lokalė: {locale}

      
Galimos lokalės: {locales.join(', ')}

      
Numatytoji lokalė: {defaultLocale}

    

  );
}

export default MyComponent;

router objektas siūlo šias pagrindines savybes:

Turinio vertimo strategijos

Sukonfigūravę savo Next.js programėlę i18n, turėsite įdiegti turinio vertimo strategijas. Štai keletas populiarių metodų:

1. Specializuotos vertimų valdymo sistemos (TMS) naudojimas

Dideliems projektams su daugeliu kalbų, TMS yra labai rekomenduojama. Populiarūs variantai:

Privalumai:

2. JSON vertimų failų kūrimas

Mažesniems projektams, JSON failų naudojimas vertimams saugoti yra paprastas ir efektyvus metodas.

Katalogo struktūros pavyzdys:


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

en.json pavyzdys:


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

es.json pavyzdys:


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

MyComponent.js pavyzdys:


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;

Šis metodas suteikia lankstumo ir yra paprastas mažesniems projektams. Paprastai jį lengva atnaujinti ir prižiūrėti.

3. Vertimo bibliotekos naudojimas

Kelios JavaScript bibliotekos supaprastina turinio vertimą jūsų React komponentuose.

Pavyzdys su next-i18next (Diegimas: npm install next-i18next i18next react-i18next):

Sukurkite i18n konfigūracijos failą (pvz., i18n.js pagrindiniame kataloge):


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

Sukurkite Next.js konfigūraciją, skirtą 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'],
  },
  // kita konfigūracija
}

module.exports = nextConfig

Pridėkite konfigūraciją ir vertimo importavimą į savo _app.js:


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

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

export default appWithTranslation(MyApp);

Sukurkite aplanką ir užpildykite jį savo vertimų lokalėmis.


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

Pavyzdys en/common.json:


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

Vertimo naudojimas komponente:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Šis pavyzdys naudoja useTranslation kabliuką, kad gautų vertimus pagal dabartinę lokalę.

Dinaminių maršrutų ir statinio svetainės generavimo (SSG) tvarkymas

Internacionalizacija tampa sudėtingesnė, kai dirbama su dinaminiais maršrutais (pvz., tinklaraščio įrašais, produktų puslapiais) ir statinio svetainės generavimu (SSG).

1. Dinaminiai maršrutai (pvz., /blog/[slug])

Dinaminiams maršrutams, kūrimo metu reikės sugeneruoti teisingus kelius kiekvienai lokalei naudojant getStaticPaths. Ši funkcija grąžina kelių masyvą, kurį Next.js turėtų iš anksto atvaizduoti.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Gauti tinklaraščio įrašų duomenis

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

  return {
    paths,
    fallback: false, // arba 'blocking', jei norite rodyti įkėlimo būseną
  };
}

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

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

Paaiškinimas:

2. Statinio svetainės generavimas (SSG) su getStaticProps

getStaticProps funkcijoje galite gauti išverstą turinį pagal locale parametrą.


export async function getStaticProps({ params, locale }) {
  // Gauti turinį pagal lokalę ir parametrus
  const { post } = await getPostBySlug(params.slug, locale);

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

Funkcija getPostBySlug turėtų gauti išverstą turinį pagal nurodytą „slug“ ir lokalę, kuris galėtų būti gaunamas iš jūsų vertimo failų, duomenų bazės ar TVS.

3. Serverio pusės atvaizdavimas (SSR) su getServerSideProps

Turiniui, kurį reikia gauti užklausos metu, naudokite getServerSideProps. Tai naudinga, jei turinys dažnai keičiasi arba yra personalizuotas kiekvienam vartotojui.


export async function getServerSideProps({ params, locale, req, res }) {
  // Gauti duomenis pagal lokalę ir parametrus (pvz., iš duomenų bazės)
  const data = await fetchData(params.slug, locale);

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

Geriausios Next.js internacionalizacijos praktikos

Laikydamiesi šių geriausių praktikų, sukursite tvirtas, prižiūrimas ir vartotojui patogias daugiakalbes programėles:

SEO aspektai internacionalizuotoms svetainėms

Optimizuoti savo internacionalizuotą svetainę paieškos sistemoms yra būtina norint pritraukti organinį srautą iš viso pasaulio. Štai keletas pagrindinių SEO geriausių praktikų:

Pavyzdys: Paprasto daugiakalbio tinklaraščio kūrimas

Sukurkime supaprastintą daugiakalbio tinklaraščio pavyzdį naudojant Next.js. Tai suteiks konkretesnę iliustraciją, kaip taikyti aukščiau aptartas sąvokas.

1. Projekto paruošimas

Sukurkite naują Next.js projektą:


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

2. Konfigūruokite i18n (next.config.js)


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

module.exports = nextConfig

3. Sukurkite vertimo failus

Sukurkite locales aplanką pagrindiniame kataloge ir pridėkite šiuos JSON failus:

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. Sukurkite tinklaraščio įrašo komponentą (pvz., 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. Sukurkite pagrindinį puslapį (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 supaprastintas pavyzdys demonstruoja pagrindinius Next.js internacionalizacijos principus. Galite išplėsti šį pagrindinį karkasą, įtraukdami sudėtingesnes funkcijas, tokias kaip dinaminiai maršrutai ir integracija su vertimų valdymo sistemomis. Apsvarstykite galimybę patobulinti aukščiau esančias nuorodas naudojant Link komponentą ir pridėti atitinkamą locale atributą.

6. Paleiskite programėlę

Paleiskite programėlę su komanda:


npm run dev

Dabar galite pasiekti savo tinklaraštį adresu http://localhost:3000 (anglų k.), http://localhost:3000/es (ispanų k.) ir http://localhost:3000/fr (prancūzų k.). Turėtumėte matyti pavadinimą ir tinklaraščio įrašo turinį, išverstą pagal pasirinktą lokalę.

Išvada

Next.js suteikia išsamų funkcijų rinkinį internacionalizacijai įdiegti jūsų žiniatinklio programėlėse. Laikydamiesi šiame vadove aprašytų principų ir technikų, galite sukurti daugiakalbes programėles, kurios teikia lokalizuotas patirtis vartotojams visame pasaulyje. Nepamirškite planuoti savo i18n strategijos iš anksto, pasirinkti tinkamą vertimo metodą pagal savo poreikius ir teikti pirmenybę vartotojo patirčiai. Kruopščiai planuodami ir vykdydami, galite sukurti programėles, kurios rezonuoja su pasauline auditorija ir atveria naujas augimo galimybes. Nuolatinis mokymasis, naujausių leidimų ir geriausių praktikų sekimas užtikrins, kad efektyviai naudojatės savo įrankiais ir technologijomis.

Technologijoms tobulėjant, tikėkitės pamatyti dar pažangesnių i18n funkcijų. Gebėjimas pasiekti vartotojus skirtingose kultūrose ir lingvistinėse grupėse išliks pagrindiniu prioritetu programėlių kūrėjams visame pasaulyje. Todėl i18n pagrindų įsisavinimas yra vertingas įgūdis, kuris padidins jūsų vertę šiandieniniame pasauliniame kūrimo peizaže.

Next.js internacionalizacija: daugiakalbių programėlių kūrimas pasaulinei auditorijai | MLOG