M

MLOG

Magyar

Tanulja meg, hogyan valósítson meg zökkenőmentes nemzetköziesítést (i18n) Next.js alkalmazásaiban a globális közönség eléréséhez. Útválasztás, tartalomfordítás és bevált gyakorlatok.

Next.js nemzetköziesítés: Többnyelvű alkalmazások készítése globális közönség számára

Napjaink összekapcsolt világában a globális közönséget kiszolgáló alkalmazások készítése már nem luxus – hanem szükségszerűség. A Next.js, egy erőteljes React keretrendszer, robusztus funkciókat kínál a nemzetköziesítés (i18n) megvalósításához, lehetővé téve, hogy olyan többnyelvű alkalmazásokat hozzon létre, amelyek lokalizált élményt nyújtanak a felhasználóknak világszerte. Ez az átfogó útmutató végigvezeti Önt a nemzetköziesített Next.js alkalmazások készítésének alapvető koncepcióin, technikáin és bevált gyakorlatain.

A nemzetköziesítés és a honosítás megértése

Mielőtt belemerülnénk a Next.js i18n sajátosságaiba, tisztázzuk a kulcsfogalmakat:

Lényegében az i18n készíti fel az alkalmazást a honosításra. A nyelvtől függő elemeknek a törzskódtól való elválasztásával megkönnyíti az alkalmazás honosítását a különböző piacokra.

Miért érdemes nemzetköziesítést megvalósítani a Next.js-ben?

Az i18n megvalósítása a Next.js alkalmazásban számos előnnyel jár:

A Next.js i18n funkciói és konfigurációja

A Next.js beépített támogatást nyújt az i18n számára az útválasztási és tartalomkezelési funkcióin keresztül. Az alábbiakban a fontos funkciók részletezése következik:

1. Az i18n konfigurálása a next.config.js fájlban

Az i18n alapkonfigurációja a next.config.js fájlban található. Íme egy példa:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // A támogatott területi beállítások (nyelvkódok) tömbje
    defaultLocale: 'en', // Az alapértelmezett területi beállítás
    localeDetection: true, // A területi beállítás automatikus észlelésének engedélyezése/letiltása a böngésző beállításai alapján (opcionális)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Magyarázat:

2. Útválasztás területi előtagokkal

A Next.js automatikusan előtaggal látja el az útvonalakat a területi beállítás alapján. Például, ha van egy oldala a /about címen, és a területi beállítás 'es' (spanyol), az URL /es/about lesz. Ez lehetővé teszi az oldalak különböző nyelvű verzióit, és segít a keresőmotoroknak indexelni a tartalmat minden egyes területi beállításhoz. A keretrendszer kezeli az átirányítást és az útválasztást.

3. A useRouter hook használata

A next/router-ből származó useRouter hook hozzáférést biztosít az aktuális területi beállításhoz és más útválasztási információkhoz.


import { useRouter } from 'next/router';

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

  return (
    

      
Jelenlegi területi beállítás: {locale}

      
Elérhető területi beállítások: {locales.join(', ')}

      
Alapértelmezett területi beállítás: {defaultLocale}

    

  );
}

export default MyComponent;

A router objektum a következő kulcsfontosságú tulajdonságokat kínálja:

Tartalomfordítási stratégiák

Miután konfigurálta a Next.js alkalmazását az i18n-re, stratégiákat kell kidolgoznia a tartalom lefordítására. Íme néhány népszerű megközelítés:

1. Dedikált fordításkezelő rendszer (TMS) használata

Nagyobb, sok nyelvet kezelő projektekhez erősen ajánlott egy TMS használata. Népszerű lehetőségek a következők:

Előnyök:

2. JSON fordítási fájlok létrehozása

Kisebb projektek esetén a JSON fájlok használata a fordítások tárolására egyszerű és hatékony módszer.

Példa könyvtárszerkezet:


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

Példa en.json:


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

Példa es.json:


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

Példa 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;

Ez a megközelítés rugalmasságot biztosít és egyszerű a kisebb projektek számára. Általában könnyen frissíthető és karbantartható.

3. Fordítási könyvtár használata

Számos JavaScript könyvtár egyszerűsíti a tartalom fordítását a React komponenseken belül.

Példa next-i18next-tel (Telepítés: npm install next-i18next i18next react-i18next):

Hozzon létre egy i18n konfigurációs fájlt (pl. i18n.js a gyökérkönyvtárban):


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

Hozza létre a Next.js konfigurációját a next-i18next számára.


// 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'],
  },
  // egyéb konfiguráció
}

module.exports = nextConfig

Adja hozzá a konfigurációt és a fordítási importot a _app.js fájlhoz:


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

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

export default appWithTranslation(MyApp);

Hozzon létre egy mappát, és töltse fel a fordításokhoz tartozó területi beállításokkal.


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

Példa en/common.json:


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

A fordítás használata egy komponensben:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Ez a példa a useTranslation hookot használja a fordítások lekérésére az aktuális területi beállítás alapján.

Dinamikus útvonalak és statikus oldalgenerálás (SSG) kezelése

A nemzetköziesítés bonyolultabbá válik, amikor dinamikus útvonalakkal (pl. blogbejegyzések, termékoldalak) és statikus oldalgenerálással (SSG) dolgozunk.

1. Dinamikus útvonalak (pl. /blog/[slug])

Dinamikus útvonalak esetén a buildelés során létre kell hoznia a megfelelő útvonalakat minden területi beállításhoz a getStaticPaths segítségével. Ez a funkció egy útvonal-tömböt ad vissza, amelyet a Next.js-nek előre kell renderelnie.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Blogbejegyzések adatainak lekérése

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

  return {
    paths,
    fallback: false, // vagy 'blocking', ha betöltési állapotot szeretne megjeleníteni
  };
}

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

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

Magyarázat:

2. Statikus oldalgenerálás (SSG) a getStaticProps-szal

A getStaticProps-ban a locale paraméter alapján kérheti le a lefordított tartalmat.


export async function getStaticProps({ params, locale }) {
  // Tartalom lekérése a területi beállítás és a paraméterek alapján
  const { post } = await getPostBySlug(params.slug, locale);

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

A getPostBySlug funkciónak le kell kérnie a lefordított tartalmat az adott slug-hoz és területi beállításhoz, amelyet a fordítási fájlokból, adatbázisból vagy egy CMS-ből lehet lekérni.

3. Szerveroldali renderelés (SSR) a getServerSideProps-szal

A kérés időpontjában lekérdezendő tartalomhoz használja a getServerSideProps-ot. Ez hasznos, ha a tartalom gyakran változik vagy minden felhasználó számára személyre szabott.


export async function getServerSideProps({ params, locale, req, res }) {
  // Adatok lekérése a területi beállítás és a paraméterek alapján (pl. adatbázisból)
  const data = await fetchData(params.slug, locale);

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

Bevált gyakorlatok a Next.js nemzetköziesítéséhez

Ezen bevált gyakorlatok követése segít Önnek robusztus, karbantartható és felhasználóbarát többnyelvű alkalmazásokat építeni:

SEO megfontolások a nemzetköziesített webhelyeknél

A nemzetköziesített webhely keresőmotorok számára történő optimalizálása elengedhetetlen a világ minden tájáról érkező organikus forgalom növeléséhez. Íme néhány kulcsfontosságú SEO bevált gyakorlat:

Példa: Egy egyszerű többnyelvű blog készítése

Készítsünk egy egyszerűsített példát egy többnyelvű blogra a Next.js segítségével. Ez egy konkrétabb illusztrációt nyújt arról, hogyan alkalmazzuk a fent tárgyalt koncepciókat.

1. Projekt beállítása

Hozzon létre egy új Next.js projektet:


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

2. i18n konfigurálása (next.config.js)


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

module.exports = nextConfig

3. Fordítási fájlok létrehozása

Hozzon létre egy locales mappát a gyökérkönyvtárban, és adja hozzá a következő JSON fájlokat:

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. A blogbejegyzés komponens létrehozása (pl. 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. A főoldal létrehozása (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;

Ez az egyszerűsített példa bemutatja a Next.js nemzetköziesítés alapelveit. Ezt az alapkeretet bővítheti bonyolultabb funkciókkal, mint például a dinamikus útvonalak és a fordításkezelő rendszerekkel való integráció. Fontolja meg a fenti linkek javítását a Link komponenssel és a megfelelő locale attribútum hozzáadását.

6. Az alkalmazás futtatása

Futtassa az alkalmazást a következővel:


npm run dev

Most már elérheti a blogját a http://localhost:3000 (angol), http://localhost:3000/es (spanyol) és http://localhost:3000/fr (francia) címeken. Látnia kell a címet és a blogbejegyzés tartalmát a kiválasztott területi beállításnak megfelelően lefordítva.

Konklúzió

A Next.js átfogó funkciókészletet biztosít a nemzetköziesítés megvalósításához webalkalmazásaiban. Az ebben az útmutatóban felvázolt elvek és technikák követésével olyan többnyelvű alkalmazásokat hozhat létre, amelyek lokalizált élményt nyújtanak a felhasználóknak szerte a világon. Ne felejtse el korán megtervezni az i18n stratégiáját, válassza ki az igényeinek megfelelő fordítási módszert, és helyezze előtérbe a felhasználói élményt. Gondos tervezéssel és kivitelezéssel olyan alkalmazásokat építhet, amelyek rezonálnak a globális közönséggel és új növekedési lehetőségeket nyitnak meg. A folyamatos tanulás, a legújabb kiadásokkal és bevált gyakorlatokkal való lépéstartás biztosítja, hogy hatékonyan használja eszközeit és technológiáit.

Ahogy a technológia fejlődik, számíthatunk még fejlettebb i18n funkciók megjelenésére. A különböző kultúrájú és nyelvi csoportokhoz tartozó felhasználók elérésének képessége továbbra is kulcsfontosságú prioritás marad az alkalmazásfejlesztők számára világszerte. Ezért az i18n alapjainak elsajátítása értékes készség, amely növeli az Ön értékét a mai globális fejlesztési környezetben.