next-intlayer: Пакет NPM для интернационализации (i18n) приложения Next.js

    Intlayer — это набор пакетов, специально разработанных для разработчиков на JavaScript. Он совместим с такими фреймворками, как React, Next.js и Express.js.

    Пакет next-intlayer позволяет интернационализировать ваше приложение Next.js. Он предоставляет провайдеры контекста и хуки для интернационализации Next.js. Кроме того, он включает плагин Next.js для интеграции Intlayer с Webpack или Turbopack, а также middleware для определения предпочтительного языка пользователя, управления cookies и обработки перенаправления URL.

    Зачем интернационализировать ваше приложение Next.js?

    Интернационализация вашего приложения Next.js необходима для эффективного обслуживания глобальной аудитории. Это позволяет вашему приложению предоставлять контент и сообщения на предпочтительном языке каждого пользователя. Эта возможность улучшает пользовательский опыт и расширяет охват вашего приложения, делая его более доступным и актуальным для людей с разным языковым фоном.

    Почему стоит интегрировать Intlayer?

    • Управление контентом на JavaScript: Используйте гибкость JavaScript для эффективного определения и управления вашим контентом.
    • Безопасная типизация: Используйте TypeScript, чтобы все определения вашего контента были точными и безошибочными.
    • Интеграция файлов контента: Держите переводы рядом с их соответствующими компонентами, улучшая удобство поддержки и ясность.

    Установка

    Установите необходимый пакет с помощью предпочитаемого менеджера пакетов:

    bash
    npm install next-intlayer

    Пример использования

    С помощью Intlayer вы можете объявлять ваш контент структурированным образом в любом месте вашего кода.

    По умолчанию Intlayer сканирует файлы с расширением .content.{ts,tsx,js,jsx,mjs,cjs}.

    Вы можете изменить расширение по умолчанию, установив свойство contentDir в файле конфигурации.

    bash
    .├── intlayer.config.ts└── src    └── components        ├── ClientComponent        │   ├── index.content.ts        │   └── index.tsx        └── ServerComponent            ├── index.content.ts            └── index.tsx

    Объявление контента

    next-intlayer создан для работы с пакетом intlayer. intlayer — это пакет, который позволяет объявлять ваш контент в любом месте вашего кода. Он преобразует многоязычные объявления контента в структурированные словари, которые легко интегрируются в ваше приложение.

    Пример объявления контента:

    tsx
    import { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      ru: "Привет, мир",    }),    numberOfCar: enu({      "<-1": "Меньше минус одной машины",      "-1": "Минус одна машина",      "0": "Нет машин",      "1": "Одна машина",      ">5": "Несколько машин",      ">19": "Много машин",    }),  },} satisfies Dictionary;export default clientComponentContent;

    Использование контента в коде

    После объявления контента вы можете использовать его в своем коде. Пример использования контента в React-компоненте:

    src/components/ClientComponentExample.tsx
    "use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const { myTranslatedContent } = useIntlayer("client-component"); // Создание связанного объявления контента  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

    Освоение интернационализации вашего приложения Next.js

    Intlayer предоставляет множество функций для помощи в интернационализации вашего приложения Next.js. Вот некоторые из ключевых функций:

    • Интернационализация серверных компонентов: Intlayer позволяет интернационализировать серверные компоненты так же, как и клиентские. Это означает, что вы можете использовать одни и те же объявления контента для клиентских и серверных компонентов.
    • Middleware для определения языка: Intlayer предоставляет middleware для определения предпочтительного языка пользователя. Этот middleware используется для определения предпочтительного языка пользователя и перенаправления их на соответствующий URL, указанный в конфигурации.
    • Интернационализация метаданных: Intlayer предоставляет способ интернационализировать ваши метаданные, такие как заголовок страницы, с использованием функции generateMetadata, предоставляемой Next.js. Вы можете использовать функцию getTranslation для перевода ваших метаданных.
    • Интернационализация sitemap.xml и robots.txt: Intlayer позволяет интернационализировать ваши файлы sitemap.xml и robots.txt. Вы можете использовать функцию getMultilingualUrls для генерации многоязычных URL для вашего sitemap.
    • Интернационализация URL: Intlayer позволяет интернационализировать ваши URL, используя функцию getMultilingualUrls. Эта функция генерирует многоязычные URL для вашего sitemap.

    Чтобы узнать больше об этих функциях, обратитесь к руководству Интернационализация (i18n) Next.js с Intlayer и маршрутизатором App Next.js 15.

    Функции, предоставляемые пакетом next-intlayer

    Пакет next-intlayer также предоставляет несколько функций для помощи в интернационализации вашего приложения.

    Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

    Ссылка на документацию GitHub
    useLocalet