Что такое Next.js и зачем он поверх React

Понимаем, чего не хватает «голому» React в продакшене и как Next.js закрывает эти дыры.

Next.js — это фреймворк поверх React, который добавляет серверный рендеринг, файловую маршрутизацию, оптимизацию изображений и шрифтов, кэширование данных и серверную логику, превращая библиотеку для UI в полноценный инструмент для fullstack-приложений.

Где заканчивается React

React — это библиотека для построения интерфейсов. Он отлично рисует компоненты в браузере, но сам по себе ничего не знает о маршрутизации, серверном рендеринге, загрузке данных, SEO или сборке для продакшена. Классическое приложение на чистом React (например, на Vite) — это SPA: браузер скачивает почти пустой HTML и большой бандл JavaScript, который уже на клиенте рисует страницу.

У SPA есть три типичные проблемы:

• SEO и шеринг. Поисковику и превью в мессенджере прилетает пустая страница — контент появляется только после выполнения JS.
• Первая отрисовка. Пользователь видит спиннер, пока качается и парсится бандл.
• Архитектура. Маршруты, загрузку данных, API и оптимизации каждый собирает вручную из десятка библиотек.

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

Next.js берёт React и достраивает вокруг него всё остальное — по соглашениям, а не по ручной настройке:

Главная идея курса

Если вы уже знаете React, то 70% Next.js — это знакомый JSX, пропсы, состояние и хуки. Новое и самое важное — это где выполняется ваш код: на сервере или в браузере. Next.js по умолчанию рендерит компоненты на сервере, а клиентский JavaScript подключает только там, где он действительно нужен (клики, ввод, эффекты). Именно это отличает «React в Next.js» от «React в SPA».

Чтобы почувствовать масштаб экономии, прикинем размер данных, которые не уезжают в браузер, если рендерить список на сервере:

const items = Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  title: "Товар №" + i,
  description: "Описание товара длиной примерно сто символов для оценки веса данных в килобайтах.",
}));

const jsonBytes = JSON.stringify(items).length;
console.log("Данных в JSON:", Math.round(jsonBytes / 1024), "КБ");
console.log("В SPA это уедет на клиент, в Server Component — останется на сервере");

Вывод:

Данных в JSON: 127 КБ
В SPA это уедет на клиент, в Server Component — останется на сервере

Итог

• React рисует UI; Next.js достраивает маршрутизацию, рендеринг, данные и оптимизации.
• Главное новое понятие — где выполняется код: сервер по умолчанию, клиент по необходимости.
• Это даёт быстрый первый экран, SEO и меньше JavaScript в браузере.