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

Коротко: React — библиотека, Next.js — фреймворк

React отвечает за одно: как описать интерфейс из компонентов и обновлять его при изменении данных. Всё остальное — маршруты, загрузка данных, сборка, SEO, сервер — вы собираете сами из отдельных инструментов.

Next.js берёт React и закрывает эти вопросы за вас. Вы получаете структуру проекта, где каждая папка — это страница, HTML готовится на сервере, а изображения, шрифты и скрипты оптимизируются автоматически.

Маршрутизация через файлы

В обычном React-приложении маршруты описывают в коде через отдельную библиотеку. В Next.js маршрут — это файл или папка:

app/
  page.tsx            -> /
  about/page.tsx      -> /about
  blog/[slug]/page.tsx -> /blog/любая-статья

Плюсы такого подхода:

• структура сайта видна прямо в дереве файлов;
• вложенные лейауты (шапка, меню, футер) задаются один раз и не перерисовываются при переходах;
• код разбивается по страницам автоматически — пользователь грузит только то, что нужно сейчас.

Серверный рендеринг

Главное, что Next.js добавляет к React, — рендеринг на сервере. Есть несколько режимов:

Почему это важно: поисковик и пользователь сразу получают готовый HTML с текстом, а не пустую страницу, которая заполняется после загрузки JavaScript. Это помогает SEO и скорости первого отображения.

Backend внутри проекта

Next.js позволяет писать серверный код рядом с фронтендом:

• Route Handlers (раньше — API routes) — обычные HTTP-эндпоинты, например для формы заявки или вебхука;
• Server Actions — функции, которые вызываются из формы и выполняются на сервере без ручного API.

Для небольших проектов это избавляет от отдельного backend-сервиса. Для сложной бизнес-логики отдельный backend всё равно может быть разумнее.

Изображения, шрифты и скрипты

Встроенные компоненты решают типичные проблемы производительности:

• next/image — отдаёт картинки нужного размера и современного формата, лениво загружает их и резервирует место, чтобы страница не «прыгала»;
• next/font — подключает шрифты без лишних запросов к сторонним серверам и без мигания текста;
• next/script — управляет моментом загрузки сторонних скриптов вроде аналитики.

Всё это напрямую влияет на Core Web Vitals.

Деплой

Варианты размещения:

• Vercel — платформа от создателей Next.js, деплой в несколько кликов;
• свой сервер на Node.js — next build и next start, часто в Docker за nginx;
• статический экспорт — если сайту не нужен сервер, его можно выгрузить как набор HTML-файлов на любой хостинг.

Каким проектам Next.js подходит

Хорошо подходит:

• корпоративные сайты, лендинги и блоги, где важна индексация;
• интернет-магазины и каталоги;
• многоязычные сайты;
• продукты, где маркетинговые страницы и личный кабинет живут в одном проекте.

Может быть избыточен:

• внутренняя админка за логином, где SEO не нужно;
• небольшой виджет или одностраничное приложение без серверной части.