M

MLOG

Slovenščina

Naučite se implementirati brezhibno internacionalizacijo (i18n) v aplikacije Next.js za doseganje globalnega občinstva. Pokriva usmerjanje, prevajanje vsebine in najboljše prakse.

Internacionalizacija v Next.js: Gradnja večjezičnih aplikacij za globalno občinstvo

V današnjem povezanem svetu gradnja aplikacij, ki so namenjene globalnemu občinstvu, ni več razkošje – je nuja. Next.js, močan ogrodje za React, ponuja robustne funkcije za implementacijo internacionalizacije (i18n), kar vam omogoča ustvarjanje večjezičnih aplikacij, ki zagotavljajo lokalizirano izkušnjo uporabnikom po vsem svetu. Ta celovit vodnik vas bo popeljal skozi bistvene koncepte, tehnike in najboljše prakse za gradnjo internacionaliziranih aplikacij Next.js.

Razumevanje internacionalizacije in lokalizacije

Preden se poglobimo v posebnosti i18n v Next.js, pojasnimo ključne pojme:

V bistvu i18n pripravi vašo aplikacijo za lokalizacijo. Z ločevanjem jezikovno odvisnih elementov od jedrne kode olajšate lokalizacijo aplikacije za različne trge.

Zakaj implementirati internacionalizacijo v Next.js?

Implementacija i18n v vaši aplikaciji Next.js ponuja številne prednosti:

Funkcije in konfiguracija i18n v Next.js

Next.js ponuja vgrajeno podporo za i18n prek svojih funkcij za usmerjanje in upravljanje vsebine. Sledi razčlenitev pomembnih funkcij:

1. Konfiguracija i18n v datoteki next.config.js

Osnovna konfiguracija za i18n se nahaja v datoteki next.config.js. Tukaj je primer:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Seznam podprtih lokalizacij (kode jezikov)
    defaultLocale: 'en', // Privzeta lokalizacija za uporabo
    localeDetection: true, // Omogoči/onemogoči samodejno zaznavanje lokalizacije na podlagi nastavitev brskalnika (izbirno)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Pojasnilo:

2. Usmerjanje s predponami lokalizacije

Next.js samodejno doda predpone potem glede na lokalizacijo. Na primer, če imate stran na /about in je lokalizacija 'es' (španščina), bo URL postal /es/about. To omogoča različne jezikovne različice strani in iskalnikom omogoča indeksiranje vsebine za vsako lokalizacijo. Ogrodje samo poskrbi za preusmerjanje in usmerjanje.

3. Uporaba kaveljčka useRouter

Kaveljček useRouter iz next/router omogoča dostop do trenutne lokalizacije in drugih informacij o usmerjanju.


import { useRouter } from 'next/router';

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

  return (
    

      
Trenutna lokalizacija: {locale}

      
Razpoložljive lokalizacije: {locales.join(', ')}

      
Privzeta lokalizacija: {defaultLocale}

    

  );
}

export default MyComponent;

Objekt router ponuja naslednje ključne lastnosti:

Strategije prevajanja vsebine

Ko ste konfigurirali vašo aplikacijo Next.js za i18n, boste morali implementirati strategije za prevajanje vaše vsebine. Tukaj je nekaj priljubljenih pristopov:

1. Uporaba namenskega sistema za upravljanje prevodov (TMS)

Za velike projekte z veliko jeziki je TMS zelo priporočljiv. Priljubljene možnosti vključujejo:

Prednosti:

2. Ustvarjanje prevajalskih datotek JSON

Za manjše projekte je uporaba datotek JSON za shranjevanje prevodov preprosta in učinkovita metoda.

Primer strukture map:


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

Primer en.json:


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

Primer es.json:


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

Primer 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;

Ta pristop zagotavlja prilagodljivost in je enostaven za manjše projekte. Na splošno je enostaven za posodabljanje in vzdrževanje.

3. Uporaba prevajalske knjižnice

Več knjižnic JavaScript poenostavi prevajanje vsebine znotraj vaših komponent React.

Primer z next-i18next (Namestitev: npm install next-i18next i18next react-i18next):

Ustvarite konfiguracijsko datoteko i18n (npr. i18n.js v vaši korenski mapi):


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

Ustvarite svojo konfiguracijo Next.js za 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'],
  },
  // druga konfiguracija
}

module.exports = nextConfig

Dodajte konfiguracijo in uvoz prevoda v svojo datoteko _app.js:


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

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

export default appWithTranslation(MyApp);

Ustvarite mapo in jo napolnite z lokalizacijami za vaše prevode.


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

Primer en/common.json:


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

Uporaba prevoda v komponenti:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Ta primer uporablja kaveljček useTranslation za pridobivanje prevodov na podlagi trenutne lokalizacije.

Obravnavanje dinamičnih poti in statičnega generiranja strani (SSG)

Internacionalizacija postane bolj zapletena pri obravnavanju dinamičnih poti (npr. objave na blogu, strani izdelkov) in statičnega generiranja strani (SSG).

1. Dinamične poti (npr. /blog/[slug])

Za dinamične poti boste morali generirati pravilne poti za vsako lokalizacijo med časom gradnje z uporabo getStaticPaths. Ta funkcija vrne seznam poti, ki jih mora Next.js predhodno upodobiti.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Pridobi podatke o objavah na blogu

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

  return {
    paths,
    fallback: false, // ali 'blocking', če želite prikazati stanje nalaganja
  };
}

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

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

Pojasnilo:

2. Statično generiranje strani (SSG) z getStaticProps

V getStaticProps lahko pridobite prevedeno vsebino na podlagi parametra locale.


export async function getStaticProps({ params, locale }) {
  // Pridobi vsebino na podlagi lokalizacije in parametrov
  const { post } = await getPostBySlug(params.slug, locale);

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

Funkcija getPostBySlug bi morala pridobiti prevedeno vsebino za dani slug in lokalizacijo, ki jo je mogoče pridobiti iz vaših prevajalskih datotek, baze podatkov ali CMS-a.

3. Strežniško upodabljanje (SSR) z getServerSideProps

Za vsebino, ki jo je treba pridobiti ob času zahteve, uporabite getServerSideProps. To je uporabno, če se vsebina pogosto spreminja ali je personalizirana za vsakega uporabnika.


export async function getServerSideProps({ params, locale, req, res }) {
  // Pridobi podatke na podlagi lokalizacije in parametrov (npr. iz baze podatkov)
  const data = await fetchData(params.slug, locale);

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

Najboljše prakse za internacionalizacijo v Next.js

Upoštevanje teh najboljših praks vam bo pomagalo zgraditi robustne, vzdržljive in uporabniku prijazne večjezične aplikacije:

SEO premisleki za internacionalizirane spletne strani

Optimizacija vaše internacionalizirane spletne strani za iskalnike je ključna za pridobivanje organskega prometa z vsega sveta. Tukaj je nekaj ključnih SEO najboljših praks:

Primer: Gradnja preprostega večjezičnega bloga

Ustvarimo poenostavljen primer večjezičnega bloga z uporabo Next.js. To bo zagotovilo bolj konkreten prikaz, kako uporabiti zgoraj obravnavane koncepte.

1. Nastavitev projekta

Ustvarite nov projekt Next.js:


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

2. Konfiguracija i18n (next.config.js)


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

module.exports = nextConfig

3. Ustvarjanje prevajalskih datotek

Ustvarite mapo locales v korenski mapi in dodajte naslednje datoteke 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. Ustvarjanje komponente za objavo na blogu (npr. 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. Ustvarjanje vstopne strani (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;

Ta poenostavljen primer prikazuje temeljna načela internacionalizacije v Next.js. Ta osnovni okvir lahko razširite z bolj zapletenimi funkcijami, kot so dinamične poti in integracija s sistemi za upravljanje prevodov. Razmislite o izboljšanju zgornjih povezav s komponento Link in dodajte ustrezen atribut locale.

6. Zagon aplikacije

Zaženite aplikacijo z:


npm run dev

Zdaj lahko dostopate do svojega bloga na http://localhost:3000 (angleščina), http://localhost:3000/es (španščina) in http://localhost:3000/fr (francoščina). Videti bi morali, da sta naslov in vsebina objave na blogu prevedena glede na izbrano lokalizacijo.

Zaključek

Next.js ponuja celovit nabor funkcij za implementacijo internacionalizacije v vaših spletnih aplikacijah. Z upoštevanjem načel in tehnik, opisanih v tem vodniku, lahko ustvarite večjezične aplikacije, ki zagotavljajo lokalizirane izkušnje uporabnikom po vsem svetu. Ne pozabite zgodaj načrtovati svoje strategije i18n, izbrati pravo metodo prevajanja za svoje potrebe in dati prednost uporabniški izkušnji. S skrbnim načrtovanjem in izvedbo lahko zgradite aplikacije, ki odmevajo pri globalnem občinstvu in odpirajo nove priložnosti za rast. Nenehno učenje, spremljanje najnovejših izdaj in najboljših praks bo zagotovilo, da boste učinkovito uporabljali svoja orodja in tehnologije.

Z napredkom tehnologije lahko pričakujemo pojav še naprednejših funkcij i18n. Zmožnost doseganja uporabnikov v različnih kulturah in jezikovnih skupinah bo ostala ključna prednostna naloga za razvijalce aplikacij po vsem svetu. Zato je obvladovanje osnov i18n dragocena veščina, ki bo povečala vašo vrednost na današnjem globalnem razvojnem prizorišču.