Релиз Nextra 4 x App Router: что нового?

Что такое Nextra?

Nextra — это мощная библиотека для рендеринга MDX-файлов с использованием Next.js. Она упрощает создание сайтов-документаций, блогов и других проектов с контентом, предоставляя готовые темы, удобные маршруты и поддержку серверных и клиентских компонентов. Благодаря своей гибкости и продвинутым возможностям, Nextra подходит как для небольших личных проектов, так и для крупных корпоративных сайтов.

Основные изменения:

Вышел Nextra 4.0! В этой версии представлены многочисленные нововведения:

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

• Внедрение Turbopack: В новой версии добавлена поддержка Turbopack — высокопроизводительного бандлера на языке Rust, что ускоряет процесс сборки и разработки.

• Новый поисковый движок Pagefind: Поиск был обновлен с FlexSearch на Pagefind, что обеспечивает более быструю и точную индексацию контента, включая динамические элементы и импортированные файлы.

• Оптимизация с помощью React Compiler: Исходный код Nextra и его тем был оптимизирован с использованием React Compiler, что улучшает производительность и уменьшает размер бандла.

• Поддержка синтаксиса уведомлений GitHub: Темы Nextra теперь поддерживают синтаксис уведомлений GitHub, автоматически преобразуя их в компоненты <Callout> в файлах .md и .mdx.

• Снижение размера бандла: В сравнении с предыдущей версией, Nextra 4 значительно уменьшает размер JavaScript, загружаемого при первом посещении, что повышает скорость загрузки страниц.

Примеры ключевых функций:

Поддержка App Router:

Nextra 4 полностью переходит на использование App Router из Next.js, что упрощает маршрутизацию и улучшает организацию контента. Теперь можно использовать два подхода для рендеринга MDX-файлов:

• Конвенция каталога контента: Использование универсального маршрута, который загружает MDX-файлы из определенного каталога.

• Конвенция файлов страниц: Следование соглашению App Router с расширениями страниц page.{md,mdx}.

Это позволяет более гибко управлять структурой проекта и улучшает производительность.

Внедрение Turbopack:

Turbopack — это новый высокопроизводительный бандлер на языке Rust, который заменяет Webpack. Он обеспечивает более быструю инкрементальную сборку, что особенно полезно при разработке крупных проектов. Для активации Turbopack достаточно добавить флаг --turbopack к команде разработки:

"scripts": {
  "dev": "next dev --turbopack"
}

Это значительно ускоряет процесс разработки и улучшает отклик системы на изменения в коде.

Новый поисковый движок Pagefind:

• Переход на Pagefind улучшает качество поиска по сайту, обеспечивая более быструю и точную индексацию. Pagefind поддерживает индексацию динамического контента, написанного на Markdown/MDX, а также импортированных JavaScript или MDX-компонентов. Для JavaScript/TypeScript страниц можно использовать атрибут data-pagefind-body для указания области, подлежащей индексации.

  export default function Page() {
    return (
      <ul data-pagefind-body>
        <li>Nextra 4 — лучшая библиотека MDX для Next.js</li>
        <li data-pagefind-ignore>Этот элемент не будет индексироваться</li>
      </ul>
    );
  }
  

  Это обеспечивает более релевантные результаты поиска и улучшает взаимодействие пользователя с сайтом.

Для получения полного списка изменений и руководства по миграции на Nextra 4 рекомендуется ознакомиться с официальной документацией.