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

Что такое 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, автоматически преобразуя их в компоненты в файлах .md и .mdx.

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

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

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

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

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

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

  Читайте так же:

  • Apple vs Samsung. Разрыв в поставках смартфонов может достичь 75 млн к 2034 году

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

Внедрение 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 (    
        
  Nextra 4 — лучшая библиотека MDX для Next.js
        
  Этот элемент не будет индексироваться
      
    );}

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

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