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

Главная перемена для того, кто пришёл из обычного React, — не SEO, а место выполнения кода. В папке app любой компонент по умолчанию серверный: он может прочитать базу данных прямо в теле функции и отдать в браузер готовую разметку без лишнего JavaScript. Зато в нём нельзя вызвать useState, повесить onClick или обратиться к window. Интерактивное выносят в клиентские компоненты с директивой «use client» в первой строке, и большинство ошибок новичков связано именно с этой границей.

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

Маршруты в App Router задают папками. Папка app/courses/[slug] с файлом page.tsx становится адресом вида /courses/react-basics, layout.tsx задаёт общую обёртку для вложенных страниц, loading.tsx показывается, пока грузятся данные, а error.tsx перехватывает ошибку только в своём разделе. Формы можно отправлять через серверные функции с директивой «use server», отдельный API для них не нужен; если он всё же требуется, его описывают в файлах route.ts. Код, срабатывающий до обработки запроса, живёт в proxy.ts — до 16-й версии этот файл назывался middleware.ts.

Отдельно решают, когда строить HTML. Статическая генерация (SSG) собирает страницу один раз при сборке — подходит для статей и справочных разделов. Серверный рендеринг (SSR) строит её на каждый запрос, когда содержимое зависит от пользователя. Инкрементальная регенерация (ISR) — промежуточный вариант: страница готова заранее, но пересобирается в фоне по таймеру или по команде после изменения данных.

Когда нужен Next.js, а когда хватит React и Vite

Решает то, как люди попадают на страницы. Если пользователь сначала входит в систему, а поисковику страницы не нужны, одностраничное приложение на React со сборкой на Vite проще: нет Node.js-сервера в продакшене и меньше движущихся частей. Если же приходят из поиска и по ссылкам из мессенджеров, HTML с текстом и метатегами должен приходить сразу.

Next.js не заменяет знание React: компоненты, props, состояние и хуки работают так же.

Учебный пример: страница курса в каталоге

Условие учебное. В каталоге несколько сотен курсов, описания меняются раз в несколько дней, на каждой странице нужна кнопка «В избранное». Страницы собирают заранее и обновляют раз в час, а кнопку делают клиентским компонентом:

// app/courses/[slug]/page.tsx — серверный компонент
export async function generateStaticParams() {
  const list = await fetch(API + '/courses').then(r => r.json());
  return list.map(c => ({ slug: c.slug }));
}

export default async function CoursePage({ params }) {
  const { slug } = await params;
  const course = await fetch(API + '/courses/' + slug,
    { next: { revalidate: 3600 } }).then(r => r.json());
  return <article><h1>{course.title}</h1>
    <FavoriteButton id={course.id} /></article>;
}

Функция generateStaticParams сообщает, какие адреса собрать при сборке. Параметр revalidate превращает статическую страницу в ISR: не чаще раза в час она пересоберётся в фоне, а посетитель получит готовую версию без ожидания. Параметры маршрута приходят как промис и требуют await: в уроках времён Next.js 13–14 их читали напрямую, и в актуальных версиях такой код не работает. Файл FavoriteButton.tsx начинается со строки «use client» и хранит состояние через useState, а текст статьи остаётся чистым HTML.

Кэширование и старые уроки

Next.js кэширует результаты запросов, готовые страницы и данные для переходов. Правила по умолчанию пересматривали несколько раз, а Next.js 16, вышедший 21 октября 2025 года, принёс Cache Components и директиву «use cache»; актуальная ветка на октябрь 2026 года — 16.4 от 6 октября. Прежде чем копировать решение, проверьте версию и маршрутизатор: Pages Router с getServerSideProps остаётся в документации, но новые проекты строят на App Router. После правок, связанных с данными, запускайте next build — в отчёте видно, какие маршруты стали статическими, а какие рендерятся на каждый запрос.

Деплой: Vercel или собственный сервер

На Vercel, площадке компании-разработчика Next.js, выкладка сводится к подключению репозитория: каждая ветка получает предварительный адрес, слияние в основную ветку обновляет сайт. Бесплатный тариф Hobby годится для учёбы и портфолио, но, как сказано в документации Vercel (обновлена 14 сентября 2026 года), он ограничен личным некоммерческим использованием. Для проекта заказчика нужен Pro: место разработчика — 20 долларов в месяц.

На своём сервере проект запускают командой next start за обратным прокси вроде nginx. Трудности начинаются, когда экземпляров приложения несколько. В руководстве по самостоятельному размещению (обновлено 1 октября 2026 года) сказано, что кэш страниц и ISR по умолчанию хранится на диске каждого экземпляра, а revalidateTag() сбрасывает кэш только на сервере, который получил вызов, — остальные продолжают отдавать устаревшие страницы. Там же предупреждение о серверных функциях: ключ шифрования создаётся заново при каждой сборке, и если контейнеры собраны отдельно, один сервер не расшифрует вызов, подготовленный другим, — пользователь увидит ошибку «Failed to find Server Action». Помогают общий обработчик кэша с внешним хранилищем вроде Redis, одна сборка для всех контейнеров, переменная NEXTSERVERACTIONSENCRYPTIONKEY и параметр deploymentId. На Vercel это решает платформа.

С чего начать и в каком порядке осваивать Next.js

Порядок выстроен так, чтобы каждая идея опиралась на понятную. Без уверенного React неясно, что именно переносится на сервер. Маршруты наглядны, с них удобно начинать. Граница между серверными и клиентскими компонентами требует практики на своих страницах, а кэширование и деплой имеют смысл, когда есть что кэшировать и выкладывать:

1. React: компоненты, props, состояние, хуки, загрузка данных.
2. Проект через create-next-app, маршруты в папке app, layout, loading и error.
3. Серверные и клиентские компоненты: что можно передать через границу.
4. Данные в серверных компонентах, формы на серверных функциях.
5. Выбор между SSG, SSR и ISR, метаданные, отчёт next build.
6. Деплой на Vercel, затем next start или Docker на своём сервере.

Первые пять шагов можно пройти по официальному учебнику на nextjs.org, где собирают панель управления с базой данных и авторизацией. Программа с наставником нужна ради проверки кода и проекта, доведённого до выкладки. Например, на онлайн-курсе Purple School «Frontend-разработчик на React» после блока по React и Redux Toolkit программа переходит к Next.js: маршруты, серверный рендеринг, формы, доступность и подготовка к продакшену. Курс рассчитан на 12 месяцев и начинается с HTML и CSS, так что тому, кто уже пишет на React, стоит спросить у школы, можно ли пропустить первые модули.

Упражнения и типичные ошибки

Для тренировки подойдёт блог из Markdown-файлов со страницами через generateStaticParams. Затем добавьте поиск — клиентский компонент поверх серверного списка, потом форму обратной связи на серверной функции с проверкой полей. Последний шаг — витрина с ISR: поменяйте данные в источнике и убедитесь, что страница обновилась через заданный интервал.

Ошибки повторяются. Директиву «use client» ставят в корневой layout, и всё приложение становится клиентским: JavaScript в браузере столько же, сколько без Next.js. Серверный компонент ходит за данными в собственный route.ts по HTTP, хотя мог бы обратиться к базе напрямую. В клиентский компонент передают через props функцию, и сборка падает с ошибкой сериализации. Вызов cookies() в глубине дерева незаметно делает всю страницу динамической. Проверяйте результат: в исходном коде страницы текст должен быть в HTML, а с отключённым JavaScript контентная страница должна читаться.

Тому, кто уже уверенно знает JavaScript, подойдёт более короткая программа. На курсе по React от Skillbox за три месяца проходят TypeScript, React и состояние, тесты и сборку, выполняют 15 практических работ и три проекта. Next.js и Nuxt в программе заявлены, но объём этой темы в описании не раскрыт, поэтому перед оплатой спросите, сколько занятий отведено серверному рендерингу.

Как Next.js влияет на доход

Next.js редко даёт отдельную строку в зарплате, но расширяет круг задач: сайты, которым важен поиск, интернет-магазины, проекты, где фронтенд-разработчик отвечает и за серверную часть страниц, и за выкладку.

Ориентир по фактическим зарплатам — калькулятор «Хабр Карьеры», построенный на анкетах специалистов, а не на вакансиях. На 14 октября 2026 года по фронтенд-разработчикам, указавшим Next.js, в описании страницы приведена зарплата 225 499 ₽ — Россия, все уровни, 129 анкет. Выборка мала, разбивку по уровням без входа на сайт увидеть не удалось, и цифра не доказывает надбавку за сам фреймворк: его указывают вместе с React и TypeScript. Для сравнения задайте в калькуляторе свой уровень и город.

Как выбрать обучение

Проверьте актуальность: App Router, серверные и клиентские компоненты, серверные функции. Если блок построен на getServerSideProps и папке pages, материал устарел на несколько лет. Посмотрите и на практику: доходит ли проект до выкладки и разбирают ли запуск на своём сервере.

Тем, кто начинает фронтенд с нуля, подойдёт длинная программа. На курсе Skillbox «Фронтенд-разработчик + ИИ» в React-треке заявлены компоненты, хуки, маршрутизация, тесты, оптимизация и серверный рендеринг; срок — девять месяцев. Next.js в опубликованном описании прямо не назван, поэтому уточните у школы, на каком фреймворке разбирают серверный рендеринг.

Важна и обратная связь. Ошибки на границе серверных и клиентских компонентов часто не ломают страницу, а делают её тяжелее, и без проверки кода наставником остаются незамеченными.

Сравнить школы по формату, практике и поддержке можно в рейтинге онлайн-школ с обучением фронтенд-разработке — он охватывает всё направление, а не только Next.js. До записи пройдите первые главы официального учебника и соберите страницу курса из примера: когда граница между сервером и браузером станет понятной, вы будете знать, что спрашивать у школы.