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'],
  },
  // другая конфигурация
}

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 должна получать переведенный контент для заданного слага и локали, который может быть извлечен из ваших файлов перевода, базы данных или 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 — это ценный навык, который повысит вашу ценность на современном глобальном рынке разработки.