Разработка фронтенда на Next.js для 1С-Битрикс: headless-архитектура

Bitrix-монолит с PHP-шаблонами решает 80% задач. Оставшиеся 20% — высоконагруженные страницы, SEO для динамичного контента, PWA, персонализация с edge computing — требуют другой архитектуры. Мы предлагаем headless-подход: Next.js как фронтенд поверх Битрикс-бэкенда. Битрикс управляет контентом и бизнес-логикой, Next.js занимается рендерингом. Это не замена Битрикс, а разделение ответственности: Битрикс — надёжный бэкенд для e-commerce (заказы, каталог, CRM, оплаты), Next.js — современный фронтенд с SSR, SSG, ISR и отличными Core Web Vitals. Наш опыт — 10+ лет разработки на Битрикс и 50+ успешных проектов. Оценим ваш проект за 1 день.

Архитектура headless Битрикс + Next.js

Битрикс выступает в роли API-сервера. На его стороне разрабатываются REST-контроллеры через \Bitrix\Main\Engine\Controller или кастомные endpoint'ы в /local/ajax/. Next.js работает на отдельном сервере (Node.js), потребляет Битрикс API и рендерит страницы. Между ними — API-слой.

Browser → Next.js (SSR/SSG) → Bitrix REST API → DB ↓ Redis Cache 

Типичная схема запросов:

// next.js: getStaticProps для страницы категории export async function getStaticProps({ params }) { const [category, products] = await Promise.all([ fetchBitrix(`/api/catalog/category/${params.slug}`), fetchBitrix(`/api/catalog/products?section=${params.slug}&limit=24`), ]); return { props: { category, products }, revalidate: 300, // ISR: перегенерация через 5 минут }; } 

Incremental Static Regeneration (ISR) — ключевая фича Next.js для e-commerce: страницы генерируются статически при первом запросе и перегенерируются в фоне по расписанию. Это даёт скорость статики при актуальности динамического контента.

Почему Next.js лучше традиционных PHP-шаблонов Битрикс?

Сравним метрики: Next.js обеспечивает LCP до 1.4 сек против 4.8 сек у стандартного шаблона, а PageSpeed Mobile поднимается с 34 до 82 баллов. Традиционный шаблон грузится дольше из-за монолитной архитектуры, тогда как Next.js с ISR отдаёт страницу из кеша за миллисекунды. ISR — это разница между потерянным клиентом и конверсией.

API на стороне Битрикс

Создание чистого REST API поверх Битрикс без лишних зависимостей:

// /local/php_interface/include/api/catalog/ProductsController.php class ProductsController extends \Bitrix\Main\Engine\Controller { public function getListAction( string $section = '', int $page = 1, int $limit = 24, string $sort = 'NAME', string $order = 'ASC' ): array { $filter = ['ACTIVE' => 'Y', 'IBLOCK_ID' => CATALOG_IBLOCK_ID]; if ($section) { $sectionId = $this->getSectionIdBySlug($section); $filter['SECTION_ID'] = $sectionId; $filter['INCLUDE_SUBSECTIONS'] = 'Y'; } $result = \CIBlockElement::GetList( [$sort => $order], $filter, false, ['nPageSize' => $limit, 'iNumPage' => $page], ['ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'PROPERTY_BRAND', 'CATALOG_PRICE_1'] ); $products = []; while ($el = $result->GetNextElement()) { $products[] = $this->formatProduct($el); } return [ 'items' => $products, 'total' => (int)$result->SelectedRowsCount(), 'pages' => ceil($result->SelectedRowsCount() / $limit), ]; } } 

API должен возвращать нормализованные данные, а не сырые Битрикс-структуры с мусорными полями ~PREVIEW_TEXT и IBLOCK_ELEMENT_ID. Подробнее о REST API Битрикс читайте в официальной документации.

SSR для SEO-критичных страниц

Карточки товаров, страницы категорий, статьи блога — кандидаты на SSG/ISR. Корзина, чекаут, личный кабинет — CSR (рендеринг на клиенте), SEO не нужен.

// Динамическая генерация путей для товаров export async function getStaticPaths() { const products = await fetchBitrix('/api/catalog/products/slugs'); return { paths: products.map(p => ({ params: { slug: p.slug } })), fallback: 'blocking', // новые товары рендерятся при первом запросе }; } 

fallback: 'blocking' позволяет обрабатывать новые товары без полной перегенерации сайта.

Кейс из нашей практики: Next.js фронтенд для fashion-ритейлера

Сеть магазинов одежды, онлайн-каталог ~35 000 SKU, сезонное пополнение. Проблема: Core Web Vitals LCP = 4.8 сек (цель < 2.5 сек), Битрикс-шаблон тяжёлый, медленный на мобильных.

Битрикс оставили как backend: управление товарами, заказы, CRM, 1С-интеграция. Разработали Next.js фронтенд.

Реализация:

1. API Битрикс: контроллеры для товаров, категорий, брендов, поиска, корзины (SSR-совместимый через cookie-сессию).

2. Next.js App Router (Next.js 14): Server Components для SEO-страниц, Client Components для интерактивных элементов (фильтр, корзина, авторизация).

3. Изображения: next/image с автоматической оптимизацией, WebP, responsive srcset. Хостинг изображений через CDN (отдельно от Битрикс).

4. Поиск: Meilisearch с индексом из Битрикс, React-компонент instant search.

5. Корзина: state в Zustand + синхронизация с Битрикс-корзиной через REST API при каждом изменении.

Переход занял 4 месяца: 1 месяц на API Битрикс, 3 месяца на Next.js фронтенд. Параллельно работал старый шаблон, переключение — по DNS в минуту.

Как интегрировать корзину между Next.js и Битрикс?

Корзина — сложный случай при headless: она должна работать до авторизации, синхронизироваться с Битрикс при авторизации, не теряться при переходе между страницами. Решение: guest_token в cookie, корзина хранится в Битрикс по этому токену. При авторизации — merge гостевой корзины с пользовательской. React-состояние — только UI-зеркало серверной корзины.

Наши инженеры гарантируют, что корзина не потеряется: опыт десятков проектов подтверждает надёжность этой схемы.

Деплой и инфраструктура

Next.js — Node.js-приложение, требует отдельного процесса. Варианты: Vercel (наиболее просто, но данные уходят за рубеж), VPS/dedicated с PM2 + nginx, Docker-контейнер.

Nginx как reverse proxy перед Next.js и Битрикс:

# Статика и SEO-страницы → Next.js location / { proxy_pass http://nextjs:3000; } # REST API → Битрикс location /api/bitrix/ { proxy_pass http://bitrix/local/ajax/; } # Административная часть → Битрикс location /bitrix/ { proxy_pass http://bitrix; } 

Что входит в работу

• Аудит текущего Битрикс-фронтенда и подготовка архитектуры headless
• Проектирование REST API: эндпоинты, схема данных, кеширование
• Разработка чистых REST-контроллеров в Битрикс
• Разработка Next.js приложения: роутинг, SSG/ISR/SSR, компоненты
• Интеграция корзины, авторизации, чекаута с Битрикс
• Настройка CDN для изображений, кеширование на уровне nginx
• Деплой, мониторинг, CI/CD
• Документация и обучение вашей команды

Сроки ориентировочно

MVP (каталог + карточка + поиск) — 2–3 месяца. Полный фронтенд с корзиной, чекаутом, кабинетом — 4–6 месяцев. Стоимость рассчитывается индивидуально — свяжитесь для оценки вашего проекта.

Хотите улучшить Core Web Vitals и SEO? Получите консультацию бесплатно. Закажите аудит — мы подготовим предложение под ключ.