Интеграция 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 рабочий день. Свяжитесь с нами, чтобы обсудить детали и получить консультацию.