Почему решили мигрировать?

Проект — мультинаправленный интернет-магазин с 120 000 уников в месяц и каталожной структурой из 62 000 SKU. На момент принятия решения (март 2025) кодовая база была на Nuxt 3 с Nitro как серверной платформой. Несмотря на то, что Nuxt оставался стабильным, у нашей команды возникла совокупность причин для миграции: Производительность на критических страницах. LCP на карточке товара в среднем составлял 2.9–3.4 секунды для десктопа и 3.8–4.6 секунды для мобильных при холодном старте. Карточки с большим количеством атрибутов и каруселью фотографий страдали особенно сильно. Сокращение времени сборки и deploy. Полная сборка на CI на том этапе занимала около 4 минут 30 секунд; incremental-режима не хватало — увеличивалась частота релизов и время ожидания в спринтах. Серверные функции и edge-возможности. Нам требовались edge-мидлвары, быстрые redirects и функций для персонализации (региональные цены, fast geolocation), где экосистема Next.js и Vercel давала удобные опции для edge handlers...

Что было тяжело?

Перенос с Vue/Nuxt на React/Next.js — это не только замена синтаксиса компонентов. Сложности охватывали архитектурные, инфраструктурные и SEO-аспекты. Разница в подходах к рендерингу и роутингу Nuxt предоставляет явные хуки типа asyncData и встроенную поддержку middleware, автоматически обрабатывает маршруты по файловой структуре и легче интегрируется с плагинами Nuxt. В Next.js ситуация изменилась с выпуском App Router, но миграция требовала решения о том, использовать ли Pages Router или App Router и как совмещать их с концепциями ISR, SSG и SSR. Конкретная проблема: у нас было много вложенных динамических роутов вроде /category/[categorySlug]/[filter]/page/[page]. В Nuxt они работали «из коробки», а в Next.js пришлось вручную продумать стратегию генерации и fallback-ов, особенно для SSG-каталогов. Переписывание бизнес-логики и состояния В проекте использовался Vuex с модульными state/actions для корзины, авторизации и управления фильтрами. Переписывание на Redux Toolkit заняло...

Перевёл интернет-магазин с Nuxt на Next.js

Перевёл интернет-магазин с Nuxt на Next.js | KtoHto

Аудит и карта зависимостей (1 неделя).
Составили список критичных страниц, сервисов и интеграций. Отметили 180 ключевых URL (категории, карточки товара, страницы брендов, аккаунты) и приоритизировали их по трафику и конверсии.
Proof-of-Concept (2 недели).
Сделали малый прототип на Next.js для карточки товара и корзины на поддомене shop-next.example.com, чтобы проверить время ответа, интеграцию с картинками и checkout flow.
Архитектурные решения и CI/CD (1 неделя).
Приняли решение размещать Next.js на Vercel (edge + serverless functions) с fallback на AWS Lambda для некоторых legacy endpoints. CI через GitHub Actions с кэшированием node_modules и .next/cache.
Перенос ядра: роуты и рендеринг (3 недели).
Переписали маршрутизацию: все критичные маршруты сделали SSR или SSG с On-demand revalidation для страниц каталога. Выполнили маппинг URL 1:1, чтобы избежать лишних редиректов.
Перенос UI и стилей (2 недели).
Компоненты перевели на TSX по приоритетам — сначала карточки товара, затем каталог, затем checkout и user flows.
Интеграции (2 недели).
Подключили платежные шлюзы, аналитические хуки, next/image оптимизацию и edge middleware для геолокации и A/B.
Тестирование и бета (2 недели).
Запустили A/B тесты на 5% трафика, мониторили метрики: TTFB, LCP, CLS, CR. Исправляли ошибки и корректировали редиректы.
Прогрессивная выкладка (1 неделя).
Раскатили 50% трафика, затем 100% после стабилизации. Финальный релиз состоялся 12 июня 2025 года.

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['cdn.example.com', 'images.example.com'],
    deviceSizes: [320, 480, 768, 1024, 1600],
  },
  async redirects() {
    return [
      { source: '/old-product/:slug', destination: '/product/:slug', permanent: true },
      { source: '/promo/2024/:path*', destination: '/promo/archived/:path*', permanent: false },
    ]
  }
}

import { NextResponse } from 'next/server'

export function middleware(request) {
  const country = request.geo?.country || 'US'
  const res = NextResponse.next()
  res.cookies.set('X-USER-COUNTRY', country)
  return res
}

export const config = { matcher: ['/product/:path*', '/category/:path*'] }

// Vue (пример)
export function useCart() {
  const state = reactive({ items: [] })
  function add(item) { state.items.push(item) }
  return { state, add }
}

// React Hook (эквивалент)
import { useState, useCallback } from 'react'
export function useCart() {
  const [items, setItems] = useState([])
  const add = useCallback((item) => setItems(prev => [...prev, item]), [])
  return { items, add }
}

// Пример записи редиректа в vercel.json (альтернатива next.config.js)
{
  "redirects": [
    { "source": "/old-category/:slug", "destination": "/category/:slug", "permanent": true }
  ]
}

export async function getServerSideProps(context) {
  const product = await fetchProduct(context.params.slug)
  return {
    props: {
      product,
      schema: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Product',
        'name': product.title,
        'sku': product.sku,
      })
    }
  }
}

Перевёл интернет-магазин с Nuxt на Next.js

Комментарии (0)

Почему решили мигрировать?

Что было тяжело?

Разница в подходах к рендерингу и роутингу

Переписывание бизнес-логики и состояния

Компоненты и стили

Интеграции и сторонние модули

SEO-риски

Шаги миграции по этапам

Примеры конфигурации

Что с SEO и редиректами?

Правила редиректов и map 1:1

Каноникал, метаданные и structured data

Мониторинг и быстрые откаты

Результаты и выводы