M

MLOG

Čeština

Naučte se, jak implementovat plynulou internacionalizaci (i18n) ve vašich Next.js aplikacích pro oslovení globálního publika. Pokrývá směrování, překlad obsahu a osvědčené postupy.

Internacionalizace v Next.js: Tvorba vícejazyčných aplikací pro globální publikum

V dnešním propojeném světě již není tvorba aplikací, které oslovují globální publikum, luxusem – je to nutnost. Next.js, výkonný framework pro React, poskytuje robustní funkce pro implementaci internacionalizace (i18n), což vám umožňuje vytvářet vícejazyčné aplikace, které poskytují lokalizovaný zážitek uživatelům po celém světě. Tento komplexní průvodce vás provede základními koncepty, technikami a osvědčenými postupy pro tvorbu internacionalizovaných aplikací v Next.js.

Pochopení internacionalizace a lokalizace

Než se ponoříme do specifik i18n v Next.js, ujasněme si klíčové pojmy:

V podstatě i18n připravuje vaši aplikaci na lokalizaci. Oddělením prvků závislých na jazyku od jádra kódu usnadníte lokalizaci aplikace pro různé trhy.

Proč implementovat internacionalizaci v Next.js?

Implementace i18n ve vaší aplikaci Next.js nabízí řadu výhod:

Funkce a konfigurace i18n v Next.js

Next.js nabízí vestavěnou podporu pro i18n prostřednictvím svých funkcí směrování a správy obsahu. Následuje přehled důležitých funkcí:

1. Konfigurace i18n v next.config.js

Základní konfigurace pro i18n se nachází v souboru next.config.js. Zde je příklad:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Pole podporovaných lokalit (kódy jazyků)
    defaultLocale: 'en', // Výchozí lokalita, která se má použít
    localeDetection: true, // Povolit/zakázat automatickou detekci lokality na základě nastavení prohlížeče (volitelné)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Vysvětlení:

2. Směrování s prefixy lokalit

Next.js automaticky přidává k trasám prefix lokality. Například, pokud máte stránku na /about a lokalita je 'es' (španělština), URL se stane /es/about. To umožňuje různé jazykové verze stránek a umožňuje vyhledávačům indexovat obsah pro každou lokalitu. Framework za vás spravuje přesměrování a směrování.

3. Využití hooku useRouter

Hook useRouter z next/router poskytuje přístup k aktuální lokalitě a dalším informacím o směrování.


import { useRouter } from 'next/router';

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

  return (
    

      
Aktuální lokalita: {locale}

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

      
Výchozí lokalita: {defaultLocale}

    

  );
}

export default MyComponent;

Objekt router nabízí následující klíčové vlastnosti:

Strategie překladu obsahu

Jakmile máte vaši aplikaci Next.js nakonfigurovanou pro i18n, budete muset implementovat strategie pro překlad vašeho obsahu. Zde je několik populárních přístupů:

1. Použití dedikovaného systému pro správu překladů (TMS)

Pro rozsáhlé projekty s mnoha jazyky je vysoce doporučen TMS. Mezi populární možnosti patří:

Výhody:

2. Vytváření JSON souborů s překlady

Pro menší projekty je použití JSON souborů k ukládání překladů jednoduchou a efektivní metodou.

Příklad adresářové struktury:


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

Příklad en.json:


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

Příklad es.json:


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

Pří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 přístup poskytuje flexibilitu a je přímočarý pro menší projekty. Obecně se snadno aktualizuje a udržuje.

3. Použití překladatelské knihovny

Několik JavaScriptových knihoven zjednodušuje překlad obsahu ve vašich React komponentách.

Příklad s next-i18next (Instalace: npm install next-i18next i18next react-i18next):

Vytvořte konfigurační soubor i18n (např. i18n.js ve vašem kořenovém adresáři):


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

Vytvořte svou Next.js konfiguraci pro 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'],
  },
  // další konfigurace
}

module.exports = nextConfig

Přidejte konfiguraci a import překladu do vašeho souboru _app.js:


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

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

export default appWithTranslation(MyApp);

Vytvořte složku a naplňte ji lokalitami pro vaše překlady.


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

Příklad en/common.json:


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

Použití překladu v komponentě:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Tento příklad používá hook useTranslation k načtení překladů na základě aktuální lokality.

Zpracování dynamických tras a generování statických stránek (SSG)

Internacionalizace se stává složitější při práci s dynamickými trasami (např. příspěvky na blogu, stránky produktů) a generováním statických stránek (SSG).

1. Dynamické trasy (např. /blog/[slug])

Pro dynamické trasy budete muset vygenerovat správné cesty pro každou lokalitu během sestavování pomocí getStaticPaths. Tato funkce vrací pole cest, které by měl Next.js předem vykreslit.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Načtení dat příspěvků na blogu

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

  return {
    paths,
    fallback: false, // nebo 'blocking', pokud chcete zobrazit stav načítání
  };
}

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

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

Vysvětlení:

2. Generování statických stránek (SSG) s getStaticProps

V getStaticProps můžete načíst přeložený obsah na základě parametru locale.


export async function getStaticProps({ params, locale }) {
  // Načtení obsahu na základě lokality a parametrů
  const { post } = await getPostBySlug(params.slug, locale);

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

Funkce getPostBySlug by měla načíst přeložený obsah pro daný slug a lokalitu, který může být získán z vašich překladových souborů, databáze nebo CMS.

3. Vykreslování na straně serveru (SSR) s getServerSideProps

Pro obsah, který je třeba načíst v době požadavku, použijte getServerSideProps. To je užitečné, pokud se obsah často mění nebo je personalizován pro každého uživatele.


export async function getServerSideProps({ params, locale, req, res }) {
  // Načtení dat na základě lokality a parametrů (např. z databáze)
  const data = await fetchData(params.slug, locale);

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

Osvědčené postupy pro internacionalizaci v Next.js

Dodržování těchto osvědčených postupů vám pomůže vytvořit robustní, udržovatelné a uživatelsky přívětivé vícejazyčné aplikace:

SEO aspekty pro internacionalizované webové stránky

Optimalizace vaší internacionalizované webové stránky pro vyhledávače je nezbytná pro přilákání organické návštěvnosti z celého světa. Zde jsou některé klíčové osvědčené postupy SEO:

Příklad: Vytvoření jednoduchého vícejazyčného blogu

Vytvořme zjednodušený příklad vícejazyčného blogu pomocí Next.js. To poskytne konkrétnější ilustraci, jak aplikovat výše uvedené koncepty.

1. Nastavení projektu

Vytvořte nový projekt Next.js:


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

2. Konfigurace i18n (next.config.js)


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

module.exports = nextConfig

3. Vytvoření překladových souborů

Vytvořte složku locales v kořenovém adresáři a přidejte následující JSON soubory:

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. Vytvoření komponenty blogového příspěvku (např. 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. Vytvoření úvodní 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ý příklad ukazuje základní principy internacionalizace v Next.js. Můžete tento základní rámec rozšířit o složitější funkce, jako jsou dynamické trasy a integrace se systémy pro správu překladů. Zvažte vylepšení výše uvedených odkazů pomocí komponenty Link a přidejte příslušný atribut locale.

6. Spuštění aplikace

Spusťte aplikaci příkazem:


npm run dev

Nyní můžete přistupovat ke svému blogu na adresách http://localhost:3000 (anglicky), http://localhost:3000/es (španělsky) a http://localhost:3000/fr (francouzsky). Měli byste vidět titulek a obsah blogového příspěvku přeložený podle vybrané lokality.

Závěr

Next.js poskytuje komplexní sadu funkcí pro implementaci internacionalizace ve vašich webových aplikacích. Dodržováním principů a technik uvedených v tomto průvodci můžete vytvářet vícejazyčné aplikace, které poskytují lokalizované zážitky uživatelům po celém světě. Nezapomeňte si svou i18n strategii naplánovat včas, zvolit správnou metodu překladu pro vaše potřeby a upřednostnit uživatelský zážitek. S pečlivým plánováním a realizací můžete vytvářet aplikace, které rezonují s globálním publikem a otevírají nové příležitosti k růstu. Neustálé učení, sledování nejnovějších vydání a osvědčených postupů zajistí, že efektivně využíváte své nástroje a technologie.

S postupem technologií očekávejte, že se objeví pokročilejší funkce i18n. Schopnost oslovit uživatele napříč různými kulturami a jazykovými skupinami zůstane klíčovou prioritou pro vývojáře aplikací po celém světě. Proto je zvládnutí základů i18n cennou dovedností, která zvýší vaši hodnotu v dnešním globálním vývojářském prostředí.