M

MLOG

Română

Învățați cum să implementați internaționalizarea (i18n) în aplicațiile Next.js pentru a ajunge la un public global. Acoperă rutarea, traducerea conținutului și cele mai bune practici.

Internaționalizare în Next.js: Construirea Aplicațiilor Multilingve pentru un Public Global

În lumea interconectată de astăzi, construirea de aplicații care se adresează unui public global nu mai este un lux – este o necesitate. Next.js, un framework React puternic, oferă funcționalități robuste pentru implementarea internaționalizării (i18n), permițându-vă să creați aplicații multilingve care oferă o experiență localizată utilizatorilor din întreaga lume. Acest ghid cuprinzător vă va prezenta conceptele, tehnicile și cele mai bune practici esențiale pentru construirea de aplicații Next.js internaționalizate.

Înțelegerea Internaționalizării și Localizării

Înainte de a aprofunda specificul i18n în Next.js, să clarificăm termenii cheie:

În esență, i18n pregătește aplicația pentru localizare. Prin separarea elementelor dependente de limbă de codul de bază, faceți mai ușoară localizarea aplicației pentru diferite piețe.

De ce să Implementăm Internaționalizarea în Next.js?

Implementarea i18n în aplicația dumneavoastră Next.js oferă numeroase beneficii:

Funcționalități și Configurare i18n în Next.js

Next.js oferă suport încorporat pentru i18n prin funcționalitățile sale de rutare și gestionare a conținutului. Următoarea este o prezentare a funcționalităților importante:

1. Configurarea i18n în next.config.js

Configurarea de bază pentru i18n se află în fișierul next.config.js. Iată un exemplu:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // O listă de locale suportate (coduri de limbă)
    defaultLocale: 'en', // Localul implicit de utilizat
    localeDetection: true, // Activează/dezactivează detecția automată a localului pe baza setărilor browserului (opțional)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Explicație:

2. Rutare cu Prefixe de Locale

Next.js adaugă automat un prefix cu localul la rute. De exemplu, dacă aveți o pagină la /about și localul este 'es' (spaniolă), URL-ul va deveni /es/about. Acest lucru permite versiuni diferite ale paginilor în limbi diferite și permite motoarelor de căutare să indexeze conținutul pentru fiecare local. Framework-ul gestionează redirecționarea și rutarea pentru dumneavoastră.

3. Utilizarea Hook-ului useRouter

Hook-ul useRouter din next/router oferă acces la localul curent și la alte informații de rutare.


import { useRouter } from 'next/router';

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

  return (
    

      
Localul curent: {locale}

      
Locale disponibile: {locales.join(', ')}

      
Localul implicit: {defaultLocale}

    

  );
}

export default MyComponent;

Obiectul router oferă următoarele proprietăți cheie:

Strategii de Traducere a Conținutului

Odată ce ați configurat aplicația Next.js pentru i18n, va trebui să implementați strategii pentru traducerea conținutului. Iată câteva abordări populare:

1. Utilizarea unui Sistem Dedicat de Management al Traducerilor (TMS)

Pentru proiecte la scară largă cu multe limbi, un TMS este foarte recomandat. Opțiunile populare includ:

Beneficii:

2. Crearea Fișierelor de Traducere JSON

Pentru proiecte mai mici, utilizarea fișierelor JSON pentru a stoca traducerile este o metodă simplă și eficientă.

Exemplu de Structură a Directoarelor:


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

Exemplu en.json:


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

Exemplu es.json:


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

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

Această abordare oferă flexibilitate și este directă pentru proiecte mai mici. Este, în general, ușor de actualizat și întreținut.

3. Utilizarea unei Biblioteci de Traducere

Mai multe biblioteci JavaScript simplifică traducerea conținutului în componentele React.

Exemplu cu next-i18next (Instalare: npm install next-i18next i18next react-i18next):

Creați un fișier de configurare i18n (de ex., i18n.js în directorul rădăcină):


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

Creați configurația Next.js pentru 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'],
  },
  // alte configurări
}

module.exports = nextConfig

Adăugați configurația și importul de traducere în fișierul _app.js:


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

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

export default appWithTranslation(MyApp);

Creați un dosar și populați-l cu localele pentru traducerile dumneavoastră.


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

Exemplu en/common.json:


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

Utilizarea traducerii într-o componentă:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Acest exemplu folosește hook-ul useTranslation pentru a prelua traducerile pe baza localului curent.

Gestionarea Rutelor Dinamice și a Generării de Site-uri Statice (SSG)

Internaționalizarea devine mai complexă atunci când se lucrează cu rute dinamice (de ex., postări de blog, pagini de produse) și generarea de site-uri statice (SSG).

1. Rute Dinamice (de ex., /blog/[slug])

Pentru rutele dinamice, va trebui să generați căile corecte pentru fiecare local în timpul compilării folosind getStaticPaths. Această funcție returnează o listă de căi pe care Next.js ar trebui să le pre-rendeze.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Preluare date postări de blog

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

  return {
    paths,
    fallback: false, // sau 'blocking' dacă doriți să afișați o stare de încărcare
  };
}

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

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

Explicație:

2. Generarea de Site-uri Statice (SSG) cu getStaticProps

În getStaticProps, puteți prelua conținut tradus pe baza parametrului locale.


export async function getStaticProps({ params, locale }) {
  // Preluare conținut pe baza localului și a parametrilor
  const { post } = await getPostBySlug(params.slug, locale);

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

Funcția getPostBySlug ar trebui să preia conținutul tradus pentru slug-ul și localul dat, care ar putea fi preluat din fișierele de traducere, baza de date sau un CMS.

3. Redare pe Server (SSR) cu getServerSideProps

Pentru conținutul care trebuie preluat la momentul cererii, utilizați getServerSideProps. Acest lucru este util dacă conținutul se schimbă frecvent sau este personalizat pentru fiecare utilizator.


export async function getServerSideProps({ params, locale, req, res }) {
  // Preluare date pe baza localului și a parametrilor (de ex., dintr-o bază de date)
  const data = await fetchData(params.slug, locale);

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

Cele mai bune practici pentru Internaționalizarea în Next.js

Respectarea acestor bune practici vă va ajuta să construiți aplicații multilingve robuste, ușor de întreținut și prietenoase cu utilizatorul:

Considerații SEO pentru Site-urile Internaționalizate

Optimizarea site-ului internaționalizat pentru motoarele de căutare este esențială pentru a atrage trafic organic din întreaga lume. Iată câteva practici SEO cheie:

Exemplu: Construirea unui Blog Multilingv Simplu

Să creăm un exemplu simplificat al unui blog multilingv folosind Next.js. Acesta va oferi o ilustrare mai concretă a modului de aplicare a conceptelor discutate mai sus.

1. Configurare Proiect

Creați un nou proiect Next.js:


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

2. Configurare i18n (next.config.js)


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

module.exports = nextConfig

3. Crearea Fișierelor de Traducere

Creați un dosar locales în directorul rădăcină și adăugați următoarele fișiere 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. Crearea Componentei Blog Post (de ex., 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. Crearea Paginii Index (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;

Acest exemplu simplificat prezintă principiile fundamentale ale internaționalizării în Next.js. Puteți extinde acest cadru de bază pentru a include funcționalități mai complexe, cum ar fi rute dinamice și integrarea cu sisteme de management al traducerilor. Luați în considerare îmbunătățirea link-urilor de mai sus cu componenta Link și adăugați atributul locale corespunzător.

6. Rularea Aplicației

Rulați aplicația cu:


npm run dev

Acum puteți accesa blogul la http://localhost:3000 (engleză), http://localhost:3000/es (spaniolă) și http://localhost:3000/fr (franceză). Ar trebui să vedeți titlul și conținutul postării de blog traduse în funcție de localul selectat.

Concluzie

Next.js oferă un set cuprinzător de funcționalități pentru implementarea internaționalizării în aplicațiile web. Urmând principiile și tehnicile prezentate în acest ghid, puteți crea aplicații multilingve care oferă experiențe localizate utilizatorilor din întreaga lume. Amintiți-vă să planificați strategia i18n din timp, să alegeți metoda de traducere potrivită pentru nevoile dumneavoastră și să prioritizați experiența utilizatorului. Cu o planificare și execuție atentă, puteți construi aplicații care rezonează cu un public global și deblochează noi oportunități de creștere. Învățarea continuă, menținerea la curent cu cele mai recente versiuni și cele mai bune practici vă vor asigura că utilizați eficient instrumentele și tehnologiile.

Pe măsură ce tehnologia avansează, așteptați-vă să apară funcționalități i18n mai avansate. Capacitatea de a ajunge la utilizatori din diferite culturi și grupuri lingvistice va rămâne o prioritate cheie pentru dezvoltatorii de aplicații din întreaga lume. Prin urmare, stăpânirea fundamentelor i18n este o abilitate valoroasă care vă va spori valoarea în peisajul global de dezvoltare de astăzi.