Что такое 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, автоматически преобразуя их в компоненты в файлах .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 (
- Nextra 4 — лучшая библиотека MDX для Next.js
- Этот элемент не будет индексироваться
); }
Это обеспечивает более релевантные результаты поиска и улучшает взаимодействие пользователя с сайтом.
Для получения полного списка изменений и руководства по миграции на Nextra 4 рекомендуется ознакомиться с официальной документацией.
Источник: habr.com
