Что такое 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 рекомендуется ознакомиться с официальной документацией.
Источник новости: habr.com