[ MIGRATION PATH ]

Миграция с Gatsby на Next.js

Средняя сложность4-8 недель

About

О миграции

Миграция с Gatsby на Next.js: современный SSG без ограничений

Gatsby был пионером статической генерации на React. Но с появлением Next.js 13+ и App Router граница между SSG, SSR и ISR стёрлась. Next.js делает всё то, что умеет Gatsby, но без плагинной архитектуры и сложного GraphQL-слоя данных. Большинство новых проектов сегодня начинаются на Next.js, а не на Gatsby.

Почему проекты переходят с Gatsby на Next.js

Медленные сборки при росте контента. Gatsby перестраивает весь сайт при каждом изменении. Сайт с тысячами страниц может собираться 20–40 минут. Next.js ISR обновляет только изменённые страницы.
Сложная система плагинов. Источники данных в Gatsby подключаются через плагины (`gatsby-source-*`). Кастомные источники требуют написания собственного плагина с GraphQL-схемой. В Next.js данные получаются обычным `fetch()`.
GraphQL как обязательный слой. Gatsby заворачивает все данные в GraphQL независимо от того, нужен ли он проекту. Это усложняет простые задачи.
Экосистема и поддержка. Gatsby потерял импульс после поглощения Netlify. Next.js активно развивается Vercel и имеет бо́льшее сообщество.

Что вы теряете и что приобретаете

Вы теряете богатую экосистему Gatsby-плагинов для изображений, CMS-источников и трансформации данных, а также GraphQL как единый интерфейс для всех источников данных. Если проект глубоко использует Gatsby Image — потребуется переход на Next.js Image.

Вы приобретаете Incremental Static Regeneration без полной пересборки, Server Components для уменьшения клиентского JavaScript, встроенный Image Optimization без плагинов, App Router с Layouts и параллельными роутами, а также простой `fetch()` вместо GraphQL для получения данных.

Этапы миграции

Инвентаризация источников данных. Определяем все `gatsby-source-*` плагины. Для каждого находим эквивалент в Next.js: прямой fetch, файловая система, CMS SDK.
Замена GraphQL на прямые запросы. Gatsby GraphQL-запросы (`useStaticQuery`, `pageQuery`) заменяем на `fetch()` в `generateStaticParams` и server components.
Перенос страниц и шаблонов. `gatsby-node.js` с `createPage` → `app/[slug]/page.tsx` с `generateStaticParams`. Шаблоны страниц становятся React-компонентами с async data fetching.
Миграция gatsby-image на next/image. Все `` заменяем на `` из `next/image`. Настраиваем `domains` или `remotePatterns` для внешних изображений.
Перенос gatsby-link на next/link. `` из Gatsby и Next.js похожи, но API немного отличается. Удаляем лишние пропсы, добавляем недостающие.
Плагины трансформации. MDX-контент через `gatsby-plugin-mdx` переносим на `@next/mdx` или `contentlayer`. Remark/Rehype плагины работают в обоих фреймворках.
Настройка деплоя. Vercel для Next.js поддерживает ISR нативно. Для других хостингов настраиваем `output: 'standalone'` или `output: 'export'`.

Сроки и стоимость

Блог или портфолио на 50–200 страниц мигрирует за 3–6 недель. Крупный контентный сайт с множеством источников данных и кастомными плагинами — 8–14 недель. Если Gatsby-проект активно использует GraphQL как API для фронтенда — закладывайте дополнительное время на рефакторинг запросов.

Документационный портал на 800 страниц переехал с Gatsby на Next.js за 7 недель. Время сборки сократилось с 35 минут до 4 минут для полного билда и до 15 секунд для ISR-обновлений. Разработчики избавились от необходимости разбираться в GraphQL только для получения данных из файлов.

Technologies

Откуда и куда

Откуда

Gatsby

Gatsby — генератор статических сайтов на основе React с богатой экосистемой плагинов и уникальным подходом к получению данных через GraphQL на этапе сборки. Gatsby генерирует оптимизированный HTML для каждой страницы, применяет code splitting, lazy loading изображений и prefetching — всё это из коробки, без ручной настройки. Студия использует Gatsby для создания маркетинговых сайтов, лендингов и контентных проектов с высокими требованиями к производительности и SEO. Gatsby хорошо интегрируется с headless CMS — Contentful, Strapi, WordPress — получая данные через их API на этапе сборки и публикуя готовый статический сайт на CDN. Статическая генерация — HTML создаётся на этапе сборки, не в runtime GraphQL data layer — единый интерфейс для получения данных из любых источников Оптимизация изображений — автоматический WebP, lazy loading, placeholder blur Богатый реестр плагинов — готовые коннекторы к CMS, API и сторонним сервисам Gatsby Cloud / CDN — incremental builds и мгновенный деплой только изменившихся страниц

О Gatsby

Куда

Next.js

Next.js — React-фреймворк для продакшен-приложений с SSR и SSG Next.js — фреймворк на базе React, разработанный компанией Vercel. Он решает одну из главных проблем традиционных React SPA — плохую индексацию поисковыми системами и медленный первый рендер. Next.js предоставляет несколько режимов рендеринга: SSR (Server-Side Rendering, рендеринг на сервере при каждом запросе), SSG (Static Site Generation, генерация статических страниц при сборке) и ISR (Incremental Static Regeneration, периодическое обновление статических страниц). Разработчик выбирает стратегию для каждой страницы отдельно. App Router, введённый в Next.js 13 и стабилизированный в 14, кардинально меняет архитектуру приложения. Server Components позволяют выполнять код на сервере и отдавать готовый HTML без JavaScript на клиенте — это критически важно для производительности и SEO. Client Components добавляются только там, где нужна интерактивность. Такая модель обеспечивает оптимальный баланс между производительностью и функциональностью. Next.js включает встроенную оптимизацию изображений (компонент Image с автоматическим WebP-конвертированием и lazy loading), оптимизацию шрифтов, поддержку Middleware для работы с запросами до рендеринга, API Routes для создания серверных endpoint прямо внутри Next.js-приложения. Для деплоя подходят Vercel (платформа от создателей), Docker, любой VPS с Node.js. Студия Gulaev.Dev использует Next.js для проектов, где критически важны SEO и скорость загрузки. Для каких проектов подходит Next.js Маркетинговые сайты и лендинги — статическая генерация даёт максимальную скорость загрузки (Core Web Vitals), критичную для конверсии и SEO. Контентные порталы и блоги — SSG + ISR позволяет публиковать тысячи страниц с обновлением без полной пересборки сайта. Интернет-магазины — страницы товаров как статика (SSG), корзина и личный кабинет как Client Components. Идеальный баланс SEO и UX. Fullstack-приложения — Next.js с API Routes или Server Actions может работать как полноценный бэкенд для небольших и средних проектов. Корпоративные сайты — когда нужны React-компоненты, высокая производительность и хорошее SEO одновременно. Headless CMS-проекты — Next.js как frontend для Contentful, Strapi, Sanity, WordPress (headless mode). Преимущества Next.js для бизнеса SEO из коробки — серверный рендеринг означает, что поисковые роботы видят готовый HTML, а не пустую страницу с JavaScript. Максимальная скорость загрузки — статические страницы отдаются из CDN без обращения к серверу. Lighthouse 95+ достижим по умолчанию. Встроенная оптимизация изображений — автоматическое сжатие, конвертация в WebP, lazy loading, предотвращение CLS. Единый стек — frontend и backend в одном репозитории, один язык (TypeScript), один деплой. Incremental Static Regeneration — страницы обновляются в фоне без полной пересборки, контент актуален без задержки. Vercel Edge Network — глобальный CDN с минимальной задержкой при деплое на Vercel. Активное развитие — Vercel инвестирует в Next.js, выходит несколько мажорных версий в год с существенными улучшениями производительности. Стоимость разработки на Next.js Корпоративный сайт (SSG) — от 100 000 до 250 000 руб. Интернет-магазин (Next.js + headless CMS или API) — от 300 000 до 700 000 руб. Контентный портал с ISR — от 150 000 до 400 000 руб. Fullstack Next.js-приложение — от 350 000 до 800 000 руб. Примеры из практики студии Gulaev.Dev применяет Next.js для проектов с высокими требованиями к SEO и скорости. В частности, реализован корпоративный сайт с гибридным рендерингом: маркетинговые страницы — SSG, личный кабинет — CSR. Интеграция с Headless WordPress как источником данных через WP REST API позволила клиенту управлять контентом привычным способом, получив при этом производительность современного JAMstack-сайта.

О Next.js