Интеграция Headless Commerce с React/Next.js Storefront под ключ

Headless Commerce на Next.js: как ускорить витрину и не переплачивать

Типичная ситуация: ваш интернет-магазин на монолитной CMS начинает тормозить при 1000 одновременных пользователей. TTFB растёт до 5 с, LCP — до 8 с. Вы решаете перейти на Headless Commerce архитектуру, но сталкиваетесь с проблемой интеграции — каждый бэкенд (Bagisto, Shopify, Medusa) требует своего формата данных. Мы решаем это с помощью единого Commerce Client, который абстрагирует различия и позволяет быстро переключать провайдера без переписывания фронта.

Наш опыт показывает, что headless подход с Next.js на 40–60% быстрее загружает страницы по сравнению с традиционным SSR на PHP, а согласно Core Web Vitals от Google, LCP и CLS улучшаются в среднем на 35%. В одном из проектов мы снизили LCP с 4.2 с до 1.8 с, а INP — с 300 мс до 150 мс. При этом экономия на инфраструктуре достигает 40% за счёт ISR и эффективного кэширования.

Как интегрировать любой Commerce API с Next.js?

Ключевой приём — единый интерфейс Commerce Client. Он абстрагирует конкретный бэкенд: будь то Bagisto, Shopify или Medusa, мы получаем одинаковые методы getProduct, getProducts, createCart и т.д. Это позволяет менять провайдера без переписывания всего фронта.

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

// lib/commerce/types.ts export interface Product { id: string; sku: string; slug: string; name: string; description: string; price: number; compareAtPrice?: number; images: ProductImage[]; variants: ProductVariant[]; categories: Category[]; } export interface CommerceClient { getProduct(slug: string): Promise<Product>; getProducts(params: ProductsParams): Promise<PaginatedProducts>; getCategories(): Promise<Category[]>; createCart(): Promise<Cart>; addToCart(cartToken: string, item: CartItem): Promise<Cart>; checkout(cartToken: string, data: CheckoutData): Promise<Order>; } 

Реализация для Bagisto:

// lib/commerce/bagisto.ts import { GraphQLClient } from 'graphql-request'; import type { CommerceClient, Product } from './types'; import { GET_PRODUCT, GET_PRODUCTS } from './queries'; export class BagistoClient implements CommerceClient { private client: GraphQLClient; constructor() { this.client = new GraphQLClient( process.env.NEXT_PUBLIC_BAGISTO_GRAPHQL_URL!, { headers: { 'Accept': 'application/json', }, } ); } async getProduct(slug: string): Promise<Product> { const { product } = await this.client.request(GET_PRODUCT, { slug }); return this.normalizeProduct(product); } private normalizeProduct(raw: any): Product { return { id: String(raw.id), sku: raw.sku, slug: raw.urlKey, name: raw.name, description: raw.description, price: parseFloat(raw.priceHtml?.finalPrice ?? raw.price), images: raw.images?.map(img => ({ url: img.path, altText: raw.name, })) ?? [], variants: raw.variants ?? [], categories: raw.categories ?? [], }; } } 

Почему стоит выбрать Next.js для headless e-commerce?

Next.js — стандартный выбор для headless e-commerce витрины: SSG для SEO, ISR для актуальности данных, Server Components для уменьшения JS-бандла, Edge Middleware для персонализации. Связка с любым Commerce API выстраивается по единому паттерну.

Наш опыт показывает, что ISR сокращает время загрузки страниц каталога в 2-3 раза по сравнению с традиционным серверным рендерингом. А Server Components уменьшают размер клиентского бандла на 30–50% — это напрямую влияет на INP и взаимодействие с пользователем. Дополнительно, preloading шрифтов и next/image добавляют копилку улучшений.

Процесс работы над проектом

1. Аналитика — изучаем ваш текущий бэкенд, требования к каталогу, корзине, checkout. Определяем метрики: целевой LCP < 2.5 с, CLS < 0.1, INP < 200 мс.
2. Проектирование — проектируем слой абстракции Commerce API, определяем контракты. Согласовываем интерактивные прототипы.
3. Реализация — пишем компоненты на React/Next.js, настраиваем ISR, корзину, checkout. Используем Zustand для клиентского состояния.
4. Тестирование — проверяем метрики производительности, интеграцию с бэкендом. Прогоняем нагрузочное тестирование до 2000 RPS.
5. Деплой — настраиваем CI/CD, деплоим на Vercel или ваш сервер. Предоставляем полную документацию.

Страницы каталога с ISR

// app/products/[slug]/page.tsx (App Router) import { commerce } from '@/lib/commerce'; import { ProductGallery } from '@/components/product/Gallery'; import { AddToCartButton } from '@/components/cart/AddToCartButton'; import { VariantSelector } from '@/components/product/VariantSelector'; interface Props { params: { slug: string }; } export async function generateStaticParams() { const slugs = await commerce.getAllProductSlugs(); return slugs.map(slug => ({ slug })); } export const revalidate = 3600; export default async function ProductPage({ params }: Props) { const product = await commerce.getProduct(params.slug); return ( <div className="grid grid-cols-1 lg:grid-cols-2 gap-12"> <ProductGallery images={product.images} /> <div> <h1 className="text-3xl font-bold">{product.name}</h1> <div className="mt-4 text-2xl">{product.price} $</div> <VariantSelector variants={product.variants} /> <AddToCartButton productId={product.id} /> </div> </div> ); } export async function generateMetadata({ params }: Props) { const product = await commerce.getProduct(params.slug); return { title: product.name, description: product.description.slice(0, 160), openGraph: { images: [product.images[0]?.url], }, }; } 

Управление состоянием корзины

Zustand для клиентского состояния корзины с персистентностью:

// stores/cart.ts import { create } from 'zustand'; import { persist } from 'zustand/middleware'; interface CartState { cartToken: string | null; items: CartItem[]; total: number; addItem: (productId: string, variantId?: string, qty?: number) => Promise<void>; removeItem: (lineId: string) => Promise<void>; clearCart: () => void; } export const useCartStore = create<CartState>()( persist( (set, get) => ({ cartToken: null, items: [], total: 0, addItem: async (productId, variantId, qty = 1) => { let { cartToken } = get(); if (!cartToken) { const cart = await commerce.createCart(); cartToken = cart.token; set({ cartToken }); } const updatedCart = await commerce.addToCart(cartToken, { productId, variantId, quantity: qty, }); set({ items: updatedCart.items, total: updatedCart.total, }); }, removeItem: async (lineId) => { const { cartToken } = get(); if (!cartToken) return; const updatedCart = await commerce.removeFromCart(cartToken, lineId); set({ items: updatedCart.items, total: updatedCart.total }); }, clearCart: () => set({ cartToken: null, items: [], total: 0 }), }), { name: 'cart-storage', partialize: (state) => ({ cartToken: state.cartToken }) } ) ); 

Checkout-поток

// app/checkout/page.tsx 'use client'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { checkoutSchema, CheckoutFormData } from '@/lib/validations/checkout'; import { useCartStore } from '@/stores/cart'; export default function CheckoutPage() { const { cartToken, clearCart } = useCartStore(); const { register, handleSubmit, formState: { errors } } = useForm<CheckoutFormData>({ resolver: zodResolver(checkoutSchema), }); const onSubmit = async (data: CheckoutFormData) => { if (!cartToken) return; await commerce.saveShippingAddress(cartToken, data.shipping); const shippingMethods = await commerce.getShippingMethods(cartToken); await commerce.saveShippingMethod(cartToken, shippingMethods[0].id); const order = await commerce.placeOrder(cartToken, data.payment); clearCart(); router.push(`/orders/${order.id}/success`); }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* поля формы */} </form> ); } 

Производительность: что влияет на Core Web Vitals

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

• Слой абстракции Commerce API с документацией
• Витрина на Next.js с ISR для каталога
• Корзина на Zustand с персистентностью
• Checkout-форма с валидацией (Zod)
• Интеграция поиска (Algolia/Typesense) — опционально
• Настройка SEO: структурированные данные (JSON-LD), метаданные, sitemap
• Деплой на хостинг (Vercel, AWS, Selectel) с CI/CD
• Документация, доступы, обучение команды заказчика

Получите консультацию по интеграции — мы поможем выбрать архитектуру и оценим объём работ.

Срок разработки витрины

Закажите разработку витрины под ключ — мы оценим ваш проект за 1 рабочий день. Свяжитесь с нами, чтобы обсудить детали и получить консультацию.