Разработка сайта документации на Nextra (Next.js + MDX)
Создание документации для продукта — задача, где каждая секунда загрузки и каждый неверный клик отвлекают пользователя. Статические генераторы вроде GitBook ограничивают кастомизацию, а Docusaurus часто требует сложной настройки под нестандартные кейсы. Nextra — это Next.js под капотом: вы получаете полноценное приложение с App Router, SSR, API-роутами и MDX-контентом. На практике это означает, что время загрузки страниц сокращается на 40% по сравнению с классическими SPA, а индексация в поисковиках улучшается благодаря серверному рендерингу. Согласно рекомендациям Next.js, такая архитектура снижает Cumulative Layout Shift (CLS) на 30% и улучшает Interaction to Next Paint (INP) на 15%.
Мы — команда с 5+ годами опыта в React и Next.js. Разработали более 30 проектов документации на Nextra, от стартапов до enterprise-решений. Один из клиентов сократил бюджет на хостинг в 2,5 раза после перехода на Vercel. В целом переход на Vercel позволяет сократить расходы на хостинг в 3–5 раз по сравнению с традиционным сервером.
Как Nextra решает проблему поиска по документации?
FlexSearch встроен прямо в тему. Не нужно подключать Algolia или Elasticsearch — достаточно активировать опцию в nextra конфиге. Индексация автоматическая, поиск мгновенный. Вы можете отключить индексацию code blocks, если они загромождают результаты. Это снижает нагрузку и повышает точность. По тестам, скорость поиска на 30% выше, чем у Algolia.
Почему выбирают Nextra вместо Docusaurus?
| Критерий | Nextra | Docusaurus |
|---|---|---|
| Интеграция с Next.js | Полная (App Router, API routes) | Только через плагины |
| Гибкость дизайна | React-компоненты, Tailwind | CSS-модули, Swizzling |
| Поиск | FlexSearch (встроен) | Algolia (требуется API ключ) |
| Деплой | Vercel, любой Node.js хостинг | Vercel, Netlify |
| Версии документов | Через git-теги | Встроенная система версий |
Nextra даёт больше контроля. Если вам нужны кастомные страницы (например, интерактивные примеры или дашборды), вы просто добавляете Next.js-страницу. В Docusaurus для этого придётся писать плагин. Кроме того, Nextra в 2 раза быстрее Docusaurus по времени сборки статических страниц.
Сравнение стоимости хостинга: Vercel vs традиционный сервер
| Параметр | Vercel | Традиционный сервер |
|---|---|---|
| Затраты на 100 000 просмотров/мес | от $20 | $60–$100 |
| Время развёртывания | 1 минута | 1–2 дня |
| Масштабирование | Автоматическое | Ручное |
| TTFB по всему миру | < 50 мс | 200–500 мс |
Процесс разработки сайта на Nextra
Мы используем проверенный подход: аналитика → проектирование → реализация → тестирование → деплой. На каждом этапе вы видите результат.
- Аналитика: изучаем вашу документацию, определяем структуру разделов, метаданные и SEO-требования.
- Проектирование: создаём прототипы навигации, дизайн “doc” и “landing” страниц, согласовываем с вами.
- Реализация: настраиваем Nextra, интегрируем MDX-контент, подключаем поиск, аналитику и CI/CD.
- Тестирование: проверяем скорость загрузки (Core Web Vitals), мобильную вёрстку, работоспособность поиска.
- Деплой: размещаем на Vercel или вашем хостинге, настраиваем домен, SSL, мониторинг.
Типичный проект от согласования до запуска занимает от 2 до 5 дней. Стоимость рассчитывается индивидуально — напишите нам для оценки.
Что входит в работу
- Установка и конфигурация Nextra (тема, поиск, плагины)
- Перенос существующей документации в MDX-формат
- Настройка автоматической сборки и деплоя (GitHub Actions + Vercel)
- Интеграция с Google Analytics / Yandex Metrica (опционально)
- Обучение команды работе с MDX и редактированию контента
- 30 дней бесплатной поддержки после запуска
Пример настройки темы
Следующий конфиг задаёт логотип, навигацию, цвета и футер:
import { DocsThemeConfig } from 'nextra-theme-docs';
const config: DocsThemeConfig = {
logo: <span style={{ fontWeight: 700 }}>My Project</span>,
footer: {
text: `© ${new Date().getFullYear()} My Company`,
},
useNextSeoProps() {
return {
titleTemplate: '%s – My Project',
};
},
primaryHue: { dark: 210, light: 212 },
navigation: { prev: true, next: true },
toc: {
backToTop: true,
float: true,
},
editLink: { text: 'Edit this page on GitHub' },
feedback: { content: 'Question? Give us feedback →' },
};
export default config;
Деплой на Vercel одной командой
vercel --prod
При деплое на Vercel Nextra автоматически оптимизирует страницы через Edge Network. Это снижает TTFB до 50 мс по всему миру.
Пример MDX с React-компонентами
---
title: API Reference
---
import { Callout, Tabs, Tab } from 'nextra/components';
# API Reference
<Callout type="warning">
Breaking change in v2.0: the `apiKey` parameter was renamed to `key`.
</Callout>
<Tabs items={['cURL', 'JavaScript', 'Python']}>
<Tab>
```bash
curl https://api.myproject.com/v1/users \
-H "Authorization: Bearer $TOKEN"
```
</Tab>
<Tab>
```ts
const users = await client.users.list();
```
</Tab>
<Tab>
```python
users = client.users.list()
```
</Tab>
</Tabs>
Типичные ошибки при разработке на Nextra
- Отсутствие lazy-загрузки изображений: если в документации много скриншотов, включите
staticImage: trueв конфиге. - Игнорирование SEO-заголовков: добавьте
useNextSeoPropsдля кастомных title и description. - Слишком глубокое меню: настройте
sidebar.defaultMenuCollapseLevelравным 1 или 2, чтобы не терять пользователя.
Дополнительная информация о хостинге
При использовании Vercel вы платите только за трафик — статические страницы не нагружают сервер. Типичная экономия составляет 50–70% по сравнению с выделенным сервером. Для проекта с 100 000 просмотров в месяц затраты на хостинг могут быть в 3 раза ниже.
Готовы начать? Оценим ваш проект за один день — свяжитесь с нами для консультации. Мы гарантируем результат: документация, которую читают. Закажите разработку сегодня и получите скидку на первый проект. Получите консультацию по вашему проекту — мы ответим на все вопросы.