M

MLOG

Hrvatski

Naučite kako implementirati besprijekornu internacionalizaciju (i18n) u svoje Next.js aplikacije kako biste dosegnuli globalnu publiku. Pokriva usmjeravanje, prijevod sadržaja i najbolje prakse.

Internacionalizacija u Next.js-u: Izrada višejezičnih aplikacija za globalnu publiku

U današnjem povezanom svijetu, izrada aplikacija koje zadovoljavaju globalnu publiku više nije luksuz – to je nužnost. Next.js, moćan React radni okvir, pruža robusne značajke za implementaciju internacionalizacije (i18n), omogućujući vam stvaranje višejezičnih aplikacija koje pružaju lokalizirano iskustvo korisnicima diljem svijeta. Ovaj sveobuhvatni vodič provest će vas kroz ključne koncepte, tehnike i najbolje prakse za izradu internacionaliziranih Next.js aplikacija.

Razumijevanje internacionalizacije i lokalizacije

Prije nego što zaronimo u specifičnosti Next.js i18n, razjasnimo ključne pojmove:

U suštini, i18n priprema vašu aplikaciju za lokalizaciju. Odvajanjem jezično ovisnih elemenata od osnovnog koda, olakšavate lokalizaciju aplikacije za različita tržišta.

Zašto implementirati internacionalizaciju u Next.js?

Implementacija i18n u vašoj Next.js aplikaciji nudi brojne prednosti:

Next.js i18n značajke i konfiguracija

Next.js nudi ugrađenu podršku za i18n kroz svoje značajke usmjeravanja i upravljanja sadržajem. Slijedi pregled važnih značajki:

1. Konfiguriranje i18n u next.config.js

Osnovna konfiguracija za i18n nalazi se unutar datoteke next.config.js. Evo primjera:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Niz podržanih lokalizacija (jezičnih kodova)
    defaultLocale: 'en', // Zadana lokalizacija koja će se koristiti
    localeDetection: true, // Omogući/onemogući automatsko prepoznavanje lokalizacije na temelju postavki preglednika (opcionalno)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Objašnjenje:

2. Usmjeravanje s prefiksima lokalizacije

Next.js automatski dodaje prefikse rutama s lokalizacijom. Na primjer, ako imate stranicu na /about i lokalizacija je 'es' (španjolski), URL će postati /es/about. To omogućuje različite jezične verzije stranica i omogućuje tražilicama indeksiranje sadržaja za svaku lokalizaciju. Radni okvir samostalno upravlja preusmjeravanjem i usmjeravanjem.

3. Korištenje useRouter kuke

Kuka useRouter iz next/router pruža pristup trenutnoj lokalizaciji i drugim informacijama o usmjeravanju.


import { useRouter } from 'next/router';

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

  return (
    

      
Trenutna lokalizacija: {locale}

      
Dostupne lokalizacije: {locales.join(', ')}

      
Zadana lokalizacija: {defaultLocale}

    

  );
}

export default MyComponent;

Objekt router nudi sljedeća ključna svojstva:

Strategije prevođenja sadržaja

Nakon što ste konfigurirali svoju Next.js aplikaciju za i18n, morat ćete implementirati strategije za prevođenje vašeg sadržaja. Evo nekoliko popularnih pristupa:

1. Korištenje namjenskog sustava za upravljanje prijevodima (TMS)

Za velike projekte s mnogo jezika, TMS se visoko preporučuje. Popularne opcije uključuju:

Prednosti:

2. Stvaranje JSON datoteka za prijevode

Za manje projekte, korištenje JSON datoteka za pohranu prijevoda je jednostavna i učinkovita metoda.

Primjer strukture direktorija:


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

Primjer en.json:


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

Primjer es.json:


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

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

Ovaj pristup pruža fleksibilnost i jednostavan je za manje projekte. Općenito je lako ažurirati i održavati.

3. Korištenje biblioteke za prevođenje

Nekoliko JavaScript biblioteka pojednostavljuje prevođenje sadržaja unutar vaših React komponenti.

Primjer s next-i18next (Instalacija: npm install next-i18next i18next react-i18next):

Stvorite i18n konfiguracijsku datoteku (npr. i18n.js u vašem korijenskom direktoriju):


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

Stvorite svoju Next.js konfiguraciju 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 konfiguraciju i uvoz prijevoda u vašu _app.js datoteku:


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

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

export default appWithTranslation(MyApp);

Stvorite mapu i popunite je lokalizacijama za vaše prijevode.


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

Primjer en/common.json:


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

Korištenje prijevoda u komponenti:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Ovaj primjer koristi useTranslation kuku za dohvaćanje prijevoda na temelju trenutne lokalizacije.

Rukovanje dinamičkim rutama i generiranjem statičkih stranica (SSG)

Internacionalizacija postaje složenija kada se radi s dinamičkim rutama (npr. postovi na blogu, stranice proizvoda) i generiranjem statičkih stranica (SSG).

1. Dinamičke rute (npr. /blog/[slug])

Za dinamičke rute, morat ćete generirati ispravne putanje za svaku lokalizaciju tijekom vremena izgradnje pomoću getStaticPaths. Ova funkcija vraća niz putanja koje bi Next.js trebao unaprijed renderirati.


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

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

  return {
    paths,
    fallback: false, // ili 'blocking' ako želite prikazati stanje učitavanja
  };
}

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

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

Objašnjenje:

2. Generiranje statičkih stranica (SSG) s getStaticProps

U getStaticProps, možete dohvatiti prevedeni sadržaj na temelju parametra locale.


export async function getStaticProps({ params, locale }) {
  // Dohvati sadržaj na temelju lokalizacije i parametara
  const { post } = await getPostBySlug(params.slug, locale);

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

Funkcija getPostBySlug trebala bi dohvatiti prevedeni sadržaj za zadani slug i lokalizaciju, koji se može dohvatiti iz vaših datoteka prijevoda, baze podataka ili CMS-a.

3. Renderiranje na strani poslužitelja (SSR) s getServerSideProps

Za sadržaj koji se mora dohvatiti u vrijeme zahtjeva, koristite getServerSideProps. Ovo je korisno ako se sadržaj često mijenja ili je personaliziran za svakog korisnika.


export async function getServerSideProps({ params, locale, req, res }) {
  // Dohvati podatke na temelju lokalizacije i parametara (npr. iz baze podataka)
  const data = await fetchData(params.slug, locale);

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

Najbolje prakse za internacionalizaciju u Next.js-u

Slijeđenje ovih najboljih praksi pomoći će vam u izgradnji robusnih, održivih i korisnički prihvatljivih višejezičnih aplikacija:

SEO razmatranja za internacionalizirane web stranice

Optimiziranje vaše internacionalizirane web stranice za tražilice ključno je za privlačenje organskog prometa iz cijelog svijeta. Evo nekih ključnih SEO najboljih praksi:

Primjer: Izrada jednostavnog višejezičnog bloga

Stvorimo pojednostavljeni primjer višejezičnog bloga koristeći Next.js. Ovo će pružiti konkretniju ilustraciju kako primijeniti gore navedene koncepte.

1. Postavljanje projekta

Stvorite novi Next.js projekt:


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

2. Konfigurirajte i18n (next.config.js)


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

module.exports = nextConfig

3. Stvorite datoteke za prijevode

Stvorite mapu locales u korijenskom direktoriju i dodajte sljedeće JSON datoteke:

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. Stvorite komponentu za blog post (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. Stvorite početnu stranicu (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;

Ovaj pojednostavljeni primjer prikazuje temeljna načela internacionalizacije u Next.js-u. Možete proširiti ovaj osnovni okvir kako biste uključili složenije značajke, kao što su dinamičke rute i integracija sa sustavima za upravljanje prijevodima. Razmislite o poboljšanju gornjih veza s komponentom Link i dodavanju odgovarajućeg atributa locale.

6. Pokrenite aplikaciju

Pokrenite aplikaciju s:


npm run dev

Sada možete pristupiti svom blogu na http://localhost:3000 (engleski), http://localhost:3000/es (španjolski) i http://localhost:3000/fr (francuski). Trebali biste vidjeti naslov i sadržaj posta na blogu prevedene na temelju odabrane lokalizacije.

Zaključak

Next.js pruža sveobuhvatan skup značajki za implementaciju internacionalizacije u vašim web aplikacijama. Slijedeći načela i tehnike navedene u ovom vodiču, možete stvoriti višejezične aplikacije koje pružaju lokalizirana iskustva korisnicima diljem svijeta. Ne zaboravite rano planirati svoju i18n strategiju, odabrati pravu metodu prevođenja za svoje potrebe i dati prioritet korisničkom iskustvu. Pažljivim planiranjem i izvedbom možete izgraditi aplikacije koje rezoniraju s globalnom publikom i otključati nove mogućnosti za rast. Kontinuirano učenje, praćenje najnovijih izdanja i najboljih praksi osigurat će da učinkovito koristite svoje alate i tehnologije.

Kako tehnologija napreduje, očekujte pojavu naprednijih i18n značajki. Sposobnost dosezanja korisnika u različitim kulturama i jezičnim skupinama ostat će ključni prioritet za programere aplikacija diljem svijeta. Stoga je ovladavanje osnovama i18n vrijedna vještina koja će povećati vašu vrijednost na današnjem globalnom razvojnom tržištu.