M

MLOG

Українська

Дізнайтеся, як реалізувати безшовну інтернаціоналізацію (i18n) у ваших додатках Next.js для охоплення глобальної аудиторії. Розглянуто маршрутизацію, переклад контенту та найкращі практики.

Інтернаціоналізація в Next.js: Створення багатомовних додатків для глобальної аудиторії

У сучасному взаємопов'язаному світі створення додатків, орієнтованих на глобальну аудиторію, — це вже не розкіш, а необхідність. Next.js, потужний фреймворк для React, надає надійні функції для реалізації інтернаціоналізації (i18n), що дозволяє створювати багатомовні додатки, які забезпечують локалізований досвід для користувачів у всьому світі. Цей вичерпний посібник проведе вас через основні концепції, техніки та найкращі практики для створення інтернаціоналізованих додатків на Next.js.

Розуміння інтернаціоналізації та локалізації

Перш ніж занурюватися в особливості i18n у Next.js, давайте уточнимо ключові терміни:

По суті, i18n готує ваш додаток до локалізації. Відокремлюючи мовно-залежні елементи від основного коду, ви полегшуєте локалізацію додатка для різних ринків.

Навіщо впроваджувати інтернаціоналізацію в Next.js?

Впровадження i18n у вашому додатку Next.js пропонує численні переваги:

Функції та конфігурація i18n в Next.js

Next.js пропонує вбудовану підтримку i18n через свої функції маршрутизації та керування контентом. Нижче наведено огляд важливих функцій:

1. Налаштування i18n у next.config.js

Основна конфігурація для i18n знаходиться у файлі next.config.js. Ось приклад:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Масив підтримуваних локалей (коди мов)
    defaultLocale: 'en', // Локаль за замовчуванням
    localeDetection: true, // Увімкнути/вимкнути автоматичне визначення локалі на основі налаштувань браузера (необов'язково)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Пояснення:

2. Маршрутизація з префіксами локалей

Next.js автоматично додає до маршрутів префікс локалі. Наприклад, якщо у вас є сторінка за адресою /about і локаль — 'es' (іспанська), URL-адреса стане /es/about. Це дозволяє створювати різні мовні версії сторінок і дає можливість пошуковим системам індексувати контент для кожної локалі. Фреймворк обробляє перенаправлення та маршрутизацію за вас.

3. Використання хука useRouter

Хук useRouter з next/router надає доступ до поточної локалі та іншої інформації про маршрутизацію.


import { useRouter } from 'next/router';

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

  return (
    

      
Поточна локаль: {locale}

      
Доступні локалі: {locales.join(', ')}

      
Локаль за замовчуванням: {defaultLocale}

    

  );
}

export default MyComponent;

Об'єкт router пропонує такі ключові властивості:

Стратегії перекладу контенту

Після того, як ви налаштували свій додаток Next.js для i18n, вам потрібно буде реалізувати стратегії для перекладу вашого контенту. Ось кілька популярних підходів:

1. Використання спеціалізованої системи управління перекладами (TMS)

Для великомасштабних проєктів з багатьма мовами настійно рекомендується використовувати TMS. Популярні варіанти включають:

Переваги:

2. Створення файлів перекладу у форматі JSON

Для невеликих проєктів використання JSON-файлів для зберігання перекладів є простим та ефективним методом.

Приклад структури каталогів:


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

Приклад en.json:


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

Приклад es.json:


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

Приклад 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;

Цей підхід забезпечує гнучкість і є простим для невеликих проєктів. Його, як правило, легко оновлювати та підтримувати.

3. Використання бібліотеки для перекладу

Кілька бібліотек JavaScript спрощують переклад контенту у ваших компонентах React.

Приклад з next-i18next (Встановлення: npm install next-i18next i18next react-i18next):

Створіть файл конфігурації i18n (наприклад, i18n.js у вашому кореневому каталозі):


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

Створіть конфігурацію Next.js для 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'],
  },
  // other configuration
}

module.exports = nextConfig

Додайте конфігурацію та імпорт перекладу до вашого файлу _app.js:


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

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

export default appWithTranslation(MyApp);

Створіть папку та заповніть її локалями для ваших перекладів.


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

Приклад en/common.json:


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

Використання перекладу в компоненті:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Цей приклад використовує хук useTranslation для отримання перекладів на основі поточної локалі.

Обробка динамічних маршрутів та генерації статичних сайтів (SSG)

Інтернаціоналізація ускладнюється при роботі з динамічними маршрутами (наприклад, пости в блозі, сторінки продуктів) та генерацією статичних сайтів (SSG).

1. Динамічні маршрути (наприклад, /blog/[slug])

Для динамічних маршрутів вам потрібно буде генерувати правильні шляхи для кожної локалі під час збірки за допомогою getStaticPaths. Ця функція повертає масив шляхів, які Next.js має попередньо відрендерити.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Отримати дані постів блогу

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

  return {
    paths,
    fallback: false, // або 'blocking', якщо ви хочете показувати стан завантаження
  };
}

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

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

Пояснення:

2. Генерація статичних сайтів (SSG) за допомогою getStaticProps

У getStaticProps ви можете отримувати перекладений контент на основі параметра locale.


export async function getStaticProps({ params, locale }) {
  // Отримати контент на основі локалі та параметрів
  const { post } = await getPostBySlug(params.slug, locale);

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

Функція getPostBySlug повинна отримувати перекладений контент для заданого slug та локалі, який може бути отриманий з ваших файлів перекладу, бази даних або CMS.

3. Рендеринг на стороні сервера (SSR) за допомогою getServerSideProps

Для контенту, який потрібно отримувати під час запиту, використовуйте getServerSideProps. Це корисно, якщо контент часто змінюється або персоналізується для кожного користувача.


export async function getServerSideProps({ params, locale, req, res }) {
  // Отримати дані на основі локалі та параметрів (напр., з бази даних)
  const data = await fetchData(params.slug, locale);

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

Найкращі практики для інтернаціоналізації в Next.js

Дотримання цих найкращих практик допоможе вам створювати надійні, підтримувані та зручні для користувача багатомовні додатки:

SEO-аспекти для інтернаціоналізованих вебсайтів

Оптимізація вашого інтернаціоналізованого вебсайту для пошукових систем є важливою для залучення органічного трафіку з усього світу. Ось кілька ключових найкращих практик SEO:

Приклад: Створення простого багатомовного блогу

Давайте створимо спрощений приклад багатомовного блогу за допомогою Next.js. Це надасть більш конкретну ілюстрацію того, як застосувати концепції, обговорені вище.

1. Налаштування проєкту

Створіть новий проєкт Next.js:


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

2. Налаштування i18n (next.config.js)


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

module.exports = nextConfig

3. Створення файлів перекладу

Створіть папку locales у кореневому каталозі та додайте наступні 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. Створення компонента для поста блогу (наприклад, 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. Створення головної сторінки (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;

Цей спрощений приклад демонструє фундаментальні принципи інтернаціоналізації в Next.js. Ви можете розширити цю базову структуру, щоб включити більш складні функції, такі як динамічні маршрути та інтеграція з системами управління перекладами. Розгляньте можливість покращити посилання вище за допомогою компонента Link та додати відповідний атрибут locale.

6. Запуск додатка

Запустіть додаток за допомогою команди:


npm run dev

Тепер ви можете отримати доступ до свого блогу за адресами http://localhost:3000 (англійською), http://localhost:3000/es (іспанською) та http://localhost:3000/fr (французькою). Ви повинні побачити заголовок та вміст поста блогу, перекладені відповідно до обраної локалі.

Висновок

Next.js надає вичерпний набір функцій для впровадження інтернаціоналізації у ваші веб-додатки. Дотримуючись принципів та технік, викладених у цьому посібнику, ви можете створювати багатомовні додатки, які забезпечують локалізований досвід для користувачів по всьому світу. Не забувайте планувати свою стратегію i18n заздалегідь, обирати правильний метод перекладу для ваших потреб та пріоритезувати користувацький досвід. Завдяки ретельному плануванню та виконанню ви можете створювати додатки, які резонують з глобальною аудиторією та відкривають нові можливості для зростання. Постійне навчання, відстеження останніх релізів та найкращих практик забезпечить ефективне використання ваших інструментів та технологій.

З розвитком технологій очікуйте появи ще більш просунутих функцій i18n. Можливість охопити користувачів з різних культур та мовних груп залишатиметься ключовим пріоритетом для розробників додатків у всьому світі. Тому володіння основами i18n є цінною навичкою, яка підвищить вашу вартість на сучасному глобальному ринку розробки.

Інтернаціоналізація в Next.js: Створення багатомовних додатків для глобальної аудиторії | MLOG