Что Next.js добавляет к React

React изначально создавался как библиотека для построения пользовательских интерфейсов. Он взял на себя декларативный рендеринг компонентов и управление состоянием в браузере, но намеренно оставил за рамками маршрутизацию, серверный рендеринг, сборку, работу с API и оптимизацию ассетов. Чтобы собрать полноценное веб-приложение на чистом React, разработчикам приходилось вручную подключать React Router, настраивать Vite или Webpack, придумывать архитектуру бэкенда и решать проблемы с поисковой оптимизацией (SEO).

Next.js — это production-ready fullstack-фреймворк для React, созданный и поддерживаемый компанией Vercel совместно с open-source сообществом и командой React. Он берёт лучшие возможности современного React (Server Components, Server Actions, потоковый рендеринг Suspense) и объединяет их с готовой файловой архитектурой, оптимизацией производительности и серверной инфраструктурой в единое целое.

1. React против Next.js: библиотека или фреймворк

Главное различие кроется в подходе: библиотека даёт инструмент для одной задачи, а фреймворк задаёт архитектурный каркас всего приложения:

2. Сравнение HTML: SPA на Vite против Next.js

Понять ключевое преимущество Next.js проще всего, открыв исходный код страницы в браузере («Просмотр кода страницы» / Ctrl+U).

Исходный код SPA на Vite:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Мой React Магазин</title>
  </head>
  <body>
    <!-- Браузер получает абсолютно пустой контейнер -->
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Пока браузер не скачает весь JavaScript-бандл (который может весить несколько мегабайт), не распарсит его и не выполнит запросы к API за товарами, пользователь видит белый экран или спиннер, а роботы поисковых систем (Google, Yandex) не видят текста страницы.

Исходный код Next.js:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Каталог ноутбуков | Next.js Store</title>
    <meta name="description" content="Купить ноутбуки с быстрой доставкой" />
  </head>
  <body>
    <header class="header">
      <nav><a href="/">Главная</a><a href="/catalog">Каталог</a></nav>
    </header>
    <main>
      <h1>Каталог ноутбуков</h1>
      <article class="card">
        <h2>MacBook Pro 16</h2>
        <p class="price">$2,499</p>
      </article>
    </main>
  </body>
</html>

Сервер генерирует готовый HTML сразу со всеми товарами и заголовками. Пользователь моментально видит контент (минимальный First Contentful Paint — FCP), а поисковые роботы сразу индексируют весь текст. Затем в фоновом режиме загружается минимальный необходимый JS-код для оживления кнопок и форм — этот процесс называется гидрацией (hydration).

3. Простота получения данных: Server Component в Next.js

В традиционном React SPA для загрузки данных требовалось создавать три состояния (data, isLoading, error) и вызывать хук useEffect. В Next.js асинхронный серверный компонент читает данные прямо в теле функции без лишнего клиентского кода:

// app/products/page.tsx - Серверный компонент Next.js
export default async function ProductsPage() {
  // Запрос выполняется на сервере во время рендера страницы
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return (
    <div className="grid grid-cols-3 gap-6 p-8">
      {products.map((item: { id: number; title: string; price: number }) => (
        <article key={item.id} className="p-4 rounded-xl border border-slate-700">
          <h2 className="text-xl font-bold">{item.title}</h2>
          <p className="text-emerald-400 mt-2">${item.price}</p>
        </article>
      ))}
    </div>
  );
}

4. Что Next.js приносит в стек разработчика

1. Server Components по умолчанию: Компоненты выполняются на сервере. Их код не отправляется в браузер пользователя, что уменьшает итоговый размер страницы и ускоряет загрузку даже на слабых мобильных устройствах.
2. Файловая маршрутизация (App Router): Достаточно создать папку app/blog/page.tsx, и страница сразу доступна по адресу /blog. Вложенные макеты (layout.tsx), обработка ошибок (error.tsx) и скелетоны загрузки (loading.tsx) работают «из коробки».
3. Server Actions: Возможность вызывать серверные функции напрямую из форм или кликов кнопок без написания ручных эндпоинтов fetch('/api/...') и контроллеров Express.
4. Автоматическая оптимизация ассетов: Компонент <Image> сам конвертирует изображения в форматы WebP/AVIF, масштабирует под размер экрана устройства и предотвращает сдвиг макета (CLS). Модуль next/font скачивает шрифты на этапе сборки и исключает внешние запросы к Google Fonts.
5. Встроенный компилятор Turbopack: Разработанный на Rust бандлер нового поколения, который запускает сервер разработки за доли секунды и моментально обновляет код (Fast Refresh).

5. Эволюция Next.js: App Router, версии 15 и 16

Исторически в Next.js существовал Pages Router (папка pages/), появившийся ещё в 2016 году. Он использовал функции getServerSideProps и getStaticProps.

Начиная с Next.js 13+, стандартом стал App Router (папка app/), построенный на новейшей архитектуре React Server Components (RSC):

• В Next.js 15 и 16 стабилизированы асинхронные параметры запросов (params, searchParams, cookies()), внедрена новая директива 'use cache', обновлена поддержка React 19 и по умолчанию активирован Turbopack.
• App Router является основным фокусом современного веб-разработчика. Pages Router поддерживается для обратной совместимости старых проектов.

💡 Роль Vercel: Компания Vercel развивает Next.js, нанимает ключевых инженеров команды React и предоставляет облачную платформу для развёртывания. Однако Next.js полностью бесплатен (MIT) и может деплоиться в собственный Docker-контейнер, на виртуальный VPS-сервер или любой Node.js-хостинг без привязки к Vercel.

6. Когда Next.js не нужен

Несмотря на популярность, Next.js — не серебряная пуля. Он может быть избыточен в следующих сценариях:

• Встраиваемые виджеты: Если вы пишете чат-виджет или калькулятор, который подключается на чужие сайты через один скрипт <script src="widget.js">.
• Закрытые корпоративные админки и личные кабинеты: Если сайт скрыт за паролем, SEO не имеет никакого значения, а все данные часто обновляются на клиенте, классического SPA на Vite + React часто бывает достаточно.
• Простые статичные одностраничники без динамики: Для них подходят чистый HTML/CSS, Astro или генераторы статических сайтов.

Во всех остальных случаях — интернет-магазины, контентные сайты, блоги, порталы, SaaS-сервисы с публичными страницами — Next.js является современным стандартом индустрии.