M

MLOG

Slovenčina

Naučte sa, ako implementovať bezproblémovú internacionalizáciu (i18n) vo vašich Next.js aplikáciách, aby ste oslovili globálne publikum. Pokrýva smerovanie, preklad obsahu a osvedčené postupy.

Internacionalizácia v Next.js: Tvorba viacjazyčných aplikácií pre globálne publikum

V dnešnom prepojenom svete už tvorba aplikácií, ktoré oslovujú globálne publikum, nie je luxusom – je to nevyhnutnosť. Next.js, výkonný framework pre React, poskytuje robustné funkcie na implementáciu internacionalizácie (i18n), ktoré vám umožnia vytvárať viacjazyčné aplikácie poskytujúce lokalizovaný zážitok používateľom na celom svete. Tento komplexný sprievodca vás prevedie základnými konceptmi, technikami a osvedčenými postupmi pri tvorbe internacionalizovaných aplikácií v Next.js.

Pochopenie internacionalizácie a lokalizácie

Predtým, ako sa ponoríme do špecifík i18n v Next.js, objasnime si kľúčové pojmy:

V podstate i18n pripravuje vašu aplikáciu na lokalizáciu. Oddelením prvkov závislých od jazyka od základného kódu uľahčujete lokalizáciu aplikácie pre rôzne trhy.

Prečo implementovať internacionalizáciu v Next.js?

Implementácia i18n vo vašej aplikácii Next.js ponúka množstvo výhod:

Funkcie a konfigurácia i18n v Next.js

Next.js ponúka vstavanú podporu pre i18n prostredníctvom svojich funkcií smerovania a správy obsahu. Nasleduje prehľad dôležitých funkcií:

1. Konfigurácia i18n v next.config.js

Základná konfigurácia pre i18n sa nachádza v súbore next.config.js. Tu je príklad:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Pole podporovaných lokalít (kódy jazykov)
    defaultLocale: 'en', // Predvolená lokalita, ktorá sa má použiť
    localeDetection: true, // Povolenie/zakázanie automatickej detekcie lokality na základe nastavení prehliadača (voliteľné)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Vysvetlenie:

2. Smerovanie s prefixmi lokality

Next.js automaticky pridáva k cestám prefix lokality. Napríklad, ak máte stránku na /about a lokalita je 'es' (španielčina), URL sa stane /es/about. To umožňuje rôzne jazykové verzie stránok a umožňuje vyhľadávačom indexovať obsah pre každú lokalitu. Framework sa za vás postará o presmerovanie a smerovanie.

3. Využitie hooku useRouter

Hook useRouter z next/router poskytuje prístup k aktuálnej lokalite a ďalším informáciám o smerovaní.


import { useRouter } from 'next/router';

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

  return (
    

      
Aktuálna lokalita: {locale}

      
Dostupné lokality: {locales.join(', ')}

      
Predvolená lokalita: {defaultLocale}

    

  );
}

export default MyComponent;

Objekt router ponúka nasledujúce kľúčové vlastnosti:

Stratégie prekladu obsahu

Keď máte svoju aplikáciu Next.js nakonfigurovanú pre i18n, budete musieť implementovať stratégie na preklad vášho obsahu. Tu je niekoľko populárnych prístupov:

1. Použitie dedikovaného systému na správu prekladov (TMS)

Pre rozsiahle projekty s mnohými jazykmi sa veľmi odporúča TMS. Medzi populárne možnosti patria:

Výhody:

2. Vytváranie JSON súborov s prekladmi

Pre menšie projekty je použitie JSON súborov na ukladanie prekladov jednoduchou a efektívnou metódou.

Príklad štruktúry adresárov:


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

Príklad en.json:


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

Príklad es.json:


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

Príklad 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;

Tento prístup poskytuje flexibilitu a je jednoduchý pre menšie projekty. Vo všeobecnosti je ľahké ho aktualizovať a udržiavať.

3. Použitie knižnice na preklady

Niekoľko JavaScript knižníc zjednodušuje preklad obsahu vo vašich React komponentoch.

Príklad s next-i18next (Inštalácia: npm install next-i18next i18next react-i18next):

Vytvorte konfiguračný súbor i18n (napr. i18n.js vo vašom koreňovom adresári):


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

Vytvorte svoju Next.js konfiguráciu pre 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'],
  },
  // ďalšia konfigurácia
}

module.exports = nextConfig

Pridajte konfiguráciu a import prekladu do vášho súboru _app.js:


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

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

export default appWithTranslation(MyApp);

Vytvorte priečinok a naplňte ho lokalitami pre vaše preklady.


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

Príklad en/common.json:


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

Použitie prekladu v komponente:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Tento príklad používa hook useTranslation na získanie prekladov na základe aktuálnej lokality.

Spracovanie dynamických ciest a generovanie statických stránok (SSG)

Internacionalizácia sa stáva zložitejšou pri práci s dynamickými cestami (napr. blogové príspevky, produktové stránky) a generovaním statických stránok (SSG).

1. Dynamické cesty (napr. /blog/[slug])

Pre dynamické cesty budete musieť počas zostavovania generovať správne cesty pre každú lokalitu pomocou getStaticPaths. Táto funkcia vracia pole ciest, ktoré by mal Next.js vopred vykresliť.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Získanie dát blogových príspevkov

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

  return {
    paths,
    fallback: false, // alebo 'blocking', ak chcete zobraziť stav načítavania
  };
}

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

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

Vysvetlenie:

2. Generovanie statických stránok (SSG) s getStaticProps

V getStaticProps môžete načítať preložený obsah na základe parametra locale.


export async function getStaticProps({ params, locale }) {
  // Získanie obsahu na základe lokality a parametrov
  const { post } = await getPostBySlug(params.slug, locale);

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

Funkcia getPostBySlug by mala načítať preložený obsah pre daný slug a lokalitu, ktorý môže byť získaný z vašich prekladových súborov, databázy alebo CMS.

3. Server-Side Rendering (SSR) s getServerSideProps

Pre obsah, ktorý je potrebné načítať v čase požiadavky, použite getServerSideProps. Je to užitočné, ak sa obsah často mení alebo je personalizovaný pre každého používateľa.


export async function getServerSideProps({ params, locale, req, res }) {
  // Získanie dát na základe lokality a parametrov (napr. z databázy)
  const data = await fetchData(params.slug, locale);

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

Osvedčené postupy pre internacionalizáciu v Next.js

Dodržiavanie týchto osvedčených postupov vám pomôže vytvoriť robustné, udržiavateľné a používateľsky prívetivé viacjazyčné aplikácie:

SEO aspekty pre internacionalizované webové stránky

Optimalizácia vašej internacionalizovanej webovej stránky pre vyhľadávače je nevyhnutná pre získavanie organickej návštevnosti z celého sveta. Tu sú niektoré kľúčové osvedčené postupy SEO:

Príklad: Tvorba jednoduchého viacjazyčného blogu

Vytvorme zjednodušený príklad viacjazyčného blogu pomocou Next.js. To poskytne konkrétnejšiu ilustráciu toho, ako aplikovať vyššie uvedené koncepty.

1. Nastavenie projektu

Vytvorte nový projekt Next.js:


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

2. Konfigurácia i18n (next.config.js)


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

module.exports = nextConfig

3. Vytvorenie prekladových súborov

Vytvorte priečinok locales v koreňovom adresári a pridajte nasledujúce JSON súbory:

locales/en.json:


{
  "title": "Vitajte na mojom blogu",
  "postTitle": "Môj prvý príspevok",
  "postContent": "Toto je obsah môjho prvého blogového príspevku."
}

locales/es.json:


{
  "title": "Vitajte na mojom blogu",
  "postTitle": "Môj prvý príspevok",
  "postContent": "Toto je obsah môjho prvého blogového príspevku."
}

locales/fr.json:


{
  "title": "Vitajte na mojom blogu",
  "postTitle": "Môj prvý článok",
  "postContent": "Toto je obsah môjho prvého blogového článku."
}

4. Vytvorenie komponentu blogového príspevku (napr. 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. Vytvorenie úvodnej stránky (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;

Tento zjednodušený príklad ukazuje základné princípy internacionalizácie v Next.js. Tento základný rámec môžete rozšíriť o zložitejšie funkcie, ako sú dynamické cesty a integrácia so systémami na správu prekladov. Zvážte vylepšenie vyššie uvedených odkazov pomocou komponentu Link a pridanie príslušného atribútu locale.

6. Spustenie aplikácie

Spustite aplikáciu pomocou:


npm run dev

Teraz môžete pristupovať k svojmu blogu na http://localhost:3000 (angličtina), http://localhost:3000/es (španielčina) a http://localhost:3000/fr (francúzština). Mali by ste vidieť titulok a obsah blogového príspevku preložený na základe zvolenej lokality.

Záver

Next.js poskytuje komplexný súbor funkcií na implementáciu internacionalizácie vo vašich webových aplikáciách. Dodržiavaním princípov a techník uvedených v tomto sprievodcovi môžete vytvárať viacjazyčné aplikácie, ktoré poskytujú lokalizované zážitky používateľom po celom svete. Nezabudnite si naplánovať stratégiu i18n včas, zvoliť správnu metódu prekladu pre vaše potreby a uprednostniť používateľský zážitok. S dôkladným plánovaním a realizáciou môžete vytvárať aplikácie, ktoré rezonujú s globálnym publikom a otvárajú nové príležitosti pre rast. Neustále vzdelávanie, sledovanie najnovších vydaní a osvedčených postupov zabezpečí, že svoje nástroje a technológie využívate efektívne.

S pokrokom technológií očakávajte, že sa objavia pokročilejšie funkcie i18n. Schopnosť osloviť používateľov naprieč rôznymi kultúrami a jazykovými skupinami zostane kľúčovou prioritou pre vývojárov aplikácií na celom svete. Preto je zvládnutie základov i18n cennou zručnosťou, ktorá zvýši vašu hodnotu na dnešnom globálnom trhu vývoja.