Содержание
Скажите Claude Code или ChatGPT «хочу сделать веб-приложение» — и почти наверняка услышите: «Давайте возьмём Next.js». Опытному разработчику это привычно. Новичок же сразу спрашивает себя: «Что такое Next.js? Чем он отличается от React? Мне правда это нужно?»
Вывод: в первых одном-двух проектах новичка Next.js «удобен», но не «обязателен». Если цель — получить работающую вещь, часто хватает варианта полегче (статический HTML, Astro, Vite + React). При этом официальная документация React советует начинать новые приложения с фреймворка и ставит Next.js первым. В статье обе стороны сверены с официальной документацией React и Next.js (на 1 октября 2026 года) и разобрано, где проходит граница между «брать» и «не брать».
Задача этой статьи — решить, что делать, когда ИИ советует Next.js. Как устроен Next.js (способы рендеринга, App Router, изменения по версиям) — в статье Что такое Next.js, а размещать ли его на Vercel — в статье Когда ИИ говорит «Используй Vercel».
Даже если ИИ советует, первому проекту он может быть не нужен
— Три варианта в зависимости от масштаба задуманного
ИИ часто первым предлагает привычную связку «Next.js + Vercel + Tailwind».
Одно собственное суждение о масштабе меняет объём того, что придётся изучить.
1. Почему ИИ советует Next.js: 3 причины
У ИИ-инструментов есть реальные основания предлагать Next.js. Вот они — в трёх пунктах.
3 причины, по которым ИИ советует Next.js
Причина 1: так советует официальная документация
Официальная страница React «Creating a React App» говорит, что для нового приложения или сайта на React рекомендуется начинать с фреймворка, и первым называет Next.js (App Router). В опубликованном коде и руководствах тоже много примеров на Next.js. Поэтому совет «берите Next.js» для ИИ — ответ, в котором трудно ошибиться. Но это не оценка того, лучший ли он именно для вашей задачи.
Причина 2: всё нужное уже включено
В «голом» React (Vite + React и т. п.) для маршрутизации, серверного рендеринга, оптимизации изображений и API нужны отдельные библиотеки. Next.js даёт всё это в одном фреймворке. Логично, что ИИ считает: «меньше объяснять», «меньше кода».
Причина 3: короткий путь до публикации
Next.js разрабатывает и поддерживает Vercel — это прямо сказано в документации React. Vercel публикует сайт после каждого push благодаря интеграции с GitHub, поэтому между написанием кода и выходом в сеть почти нет трения. Но у бесплатного тарифа Vercel есть условия — например, только некоммерческое использование. Подробности — в статье Когда ИИ говорит «Используй Vercel».
2. Что такое Next.js: ровно столько, сколько нужно для решения
Разберёмся с терминами. Три из них легко спутать:
- JavaScript — базовый язык программирования, который работает в браузере
- React — библиотека для интерфейсов от Meta (бывший Facebook), собирающая экраны из компонентов
- Next.js — фреймворк поверх React от Vercel, который объединяет механизмы, нужные любому веб-приложению: маршрутизацию, серверный рендеринг, оптимизацию и т. д.
Аналогия со стройкой: JavaScript — доски, React — молоток и пила, Next.js — домокомплект, в котором каркас (фундамент, стойки, стропила) уже собран. Добавьте отделку и мебель — и можно въезжать, но придётся следовать правилам комплекта.
На 1 октября 2026 года актуальная версия — Next.js 16.3 (выпущена 3 августа 2026 года). Для решения важнее номера версии темп обновлений. С июля 2026 года Next.js выпускает ежемесячные исправления безопасности с предварительным анонсом, а в сентябре 2026 года вышли исправления, где 16.3 — «Active LTS», а 15.5 — «Maintenance LTS» (блог Next.js). Если берёте Next.js, закладывайте время на эти обновления. Подробное объяснение устройства (SSR, SSG, ISR, App Router, изменения по версиям) — в статье Что такое Next.js.
3. Нужен ли Next.js сейчас? Где проходит граница
Сузьте вопрос «нужен ли вам Next.js» пятью вопросами. Затем — что за и против говорит официальная документация и таблица с границей.
5 вопросов: нужен ли Next.js?
Если два и более ответа на В1–В3 указывают на Next.js — он подходит.
Если почти ни один — стоит рассмотреть вариант полегче.
За и против по официальной документации (на 1 октября 2026 года)
В документации Next.js нет списка «случаев, когда он не подходит». Материал для решения дают руководство React о том, как начинать, и руководство Next.js о том, что где работает.
| Источник | Что сказано в оригинале | Что это значит для решения |
|---|---|---|
| React «Creating a React App» | Рекомендует начинать новые приложения с фреймворка. Называет Next.js (App Router), React Router (v7) и Expo (для нативных приложений) | Для веб-приложений Next.js — один из рекомендуемых кандидатов, но не единственный |
| Та же страница, «Start From Scratch» | Если у приложения ограничения, которые фреймворки плохо покрывают, если хочется собрать свой фреймворк или изучить основы React, можно начать с нуля (маршрутизацию и загрузку данных выбираете сами) | Начать с «голого» React на Vite ради обучения — в духе официального руководства |
| Next.js «Deploying» | Сервер Node.js и Docker поддерживают все функции; статический экспорт ограничен; собственные интеграции платформ «могут отличаться» по функциям и совместимости | Доступные функции зависят от места размещения. Всё работает и без Vercel |
| Next.js «Static Exports» | При статическом экспорте не поддерживаются cookies, настройки rewrites/redirects/headers, ISR (периодическая перегенерация) и Route Handlers, зависящие от запроса | Если хотите разместить на хостинге только со статическими файлами — проектируйте без этого или выбирайте другой вариант |
| Блог Next.js | С июля 2026 года — ежемесячные выпуски исправлений безопасности с анонсом. На сентябрь 2026 года 16.3 — Active LTS, 15.5 — Maintenance LTS | Если приложение работает на сервере, регулярные обновления — часть сделки |
Где проходит граница: брать Next.js или нет
Если свести первоисточники и пять вопросов, граница выглядит так (читайте отдельно, что говорят официальные источники, а что — выводы этой статьи).
| Условие | Брать Next.js | Не брать (альтернативы) |
|---|---|---|
| Что делаете | Веб-приложение, где смешаны публичные страницы, закрытые экраны и API | Сайт, который только выводит статьи (Astro, Hugo, WordPress) |
| Поисковый трафик | Много страниц, которые должны попасть в поиск | Только экраны после входа (SPA на Vite + React) |
| Этап обучения | Основы React (компоненты, props, state) уже знакомы | React ещё в новинку (документация React тоже показывает путь «с нуля») |
| Размещение | Есть Node.js или Docker либо совместимый PaaS вроде Vercel | Можно разместить только статические файлы; если нужны серверные функции — другая схема |
| Сопровождение | Можете ставить ежемесячные обновления безопасности | Нет ресурсов следить за ними (статические сайты уязвимы меньше) |
| Что уже есть | Новый проект | Уже работают Laravel, Rails, Django и т. п. |
4. Как начать без Next.js: 4 основные альтернативы
Если стало ясно, что «не обязательно Next.js», реалистичны четыре альтернативы под разные задачи.
| Вариант | Для кого | Сильные стороны | Слабые стороны |
|---|---|---|---|
| Astro | Блоги, портфолио, лендинги | Выдаёт страницы как HTML и добавляет JavaScript только там, где нужна интерактивность. Можно смешивать компоненты React, Vue и Svelte | Не подходит для динамических приложений, построенных вокруг входа |
| Vite + React | SPA, внутренние инструменты, ToDo | Мало настроек, запускается сразу. Можно сосредоточиться на основах React | Страницам для поиска нужна отдельная серверная часть |
| SvelteKit | Нужен серверный рендеринг, но не обязательно React | Синтаксис близок к HTML. Серверный рендеринг встроен | Знания React напрямую не переносятся |
| HTML + Vanilla JS | Совсем небольшие сайты | Никаких зависимостей; публикация — просто загрузка статических файлов | С ростом становится трудно поддерживать |
Конкретные ориентиры:
- Личный блог / сайт со статьями → Astro. Сам AI Arte работает на Laravel, но для нового статического блога Astro стоит попробовать первым
- ToDo, калькулятор, внутренняя SPA → Vite + React. Заодно хорошо для изучения основ React
- «Не хочу React» → SvelteKit. Его шаблоны похожи на HTML
- Один лендинг → HTML + CSS. Фреймворк не нужен
5. Если используете: 5 основ
Если решили идти с Next.js, эти пять основ — минимум.
Основа 1: App Router против Pages Router
В Next.js сосуществуют новый подход (App Router) и старый (Pages Router). Новые проекты начинайте на App Router (официальная документация строится вокруг него). Многие старые руководства рассчитаны на Pages Router, поэтому привыкайте проверять: «это для App Router?»
Основа 2: Server Components и Client Components
Центральная идея App Router. Компоненты по умолчанию — Server Components (рендерятся на сервере). Части, где нужна интерактивность вроде кликов, становятся Client Components, если в начале файла написать 'use client'. Правило «данные — на сервере, взаимодействие — на клиенте» снимает большую часть первоначальной путаницы.
Основа 3: имена файлов — это маршруты
app/about/page.tsx → /about, app/blog/[slug]/page.tsx → /blog/любая-строка. Структура папок и есть URL. Это другой подход, чем у React Router и подобных, поэтому поначалу непривычно.
Основа 4: где хранить переменные окружения
Ключи API и похожие значения — в .env.local. Префикс NEXT_PUBLIC_ ставьте только тем значениям, которые можно отдать в браузер; серверным значениям — не ставьте. Ошибиться и выставить секрет в браузер — классическая авария новичка.
Основа 5: размещение не на Vercel
Согласно официальной странице Next.js «Deploying», сервер Node.js (next start) и Docker поддерживают все функции. Статический экспорт — только часть. Cloudflare, Netlify и другие используют собственные интеграции, которые, по словам документации, «могут отличаться» по функциям и совместимости (Cloudflare и Netlify разрабатывают проверенные адаптеры). На своём сервере тоже работает всё, но обновления и мониторинг ложатся на вас. Условия Vercel — в статье Когда ИИ говорит «Используй Vercel».
6. 3 ловушки для новичков
Ловушка 1: «всё на use client»
Если при каждой ошибке добавлять 'use client', от преимуществ серверного рендеринга почти ничего не остаётся. Тогда проще уж Vite + React. Помните: «Client — по минимуму, Server — по умолчанию».
Ловушка 2: условия хостинга узнают слишком поздно
Типичная история: начинаете на бесплатном тарифе Vercel, потому что так сказал ИИ, а потом узнаёте, что «с рекламой сайт становится коммерческим и бесплатный тариф уже не подходит». Тариф Hobby у Vercel — только для личного некоммерческого использования; Pro — от $20 в месяц, а превышение оплачивается по факту (документация Vercel, на 1 октября 2026 года). Бывает и наоборот: пытаетесь выложить приложение на хостинг только для статических файлов и потом выясняете, что редиректы и ISR не работают. Решите, где будет жить сайт, до начала работы, и проектируйте только из того, что там работает.
Ловушка 3: ИИ пишет старым синтаксисом Pages Router
В обучающих данных много старого кода, поэтому ИИ иногда выдаёт код с getStaticProps в стиле Pages Router или папкой pages/. Достаточно явно написать «под App Router», и точность вырастет. См. также Советы по промптам.
next из package.json и добавьте строку вроде «App Router, TypeScript» — сгенерированный код будет реже расходиться с проектом. В Next.js 16.3 к тому же появилась возможность для ИИ-агентов читать документацию под версию вашего проекта без настройки (Next.js 16.3).
Итоги
Главное из статьи:
- Почему ИИ советует Next.js: так советует документация / всё включено / короткий путь до публикации — всё верно, но это не то же самое, что «лучше всего для вас»
- Документация React советует начинать новые приложения с фреймворка и одновременно показывает путь «с нуля» для изучения основ
- Решение — пять вопросов (что делаете, поисковый трафик, вход/БД, основы React, размещение) и таблица с границей
- Next.js работает со всеми функциями на сервере Node.js или в Docker; статический экспорт — только с частью. Vercel не обязателен
- Если берёте его, закладывайте ежемесячные обновления безопасности (с июля 2026 года)
- Три ловушки: всё на use client / поздно узнанные условия хостинга / ИИ пишет старым Pages Router
Когда ИИ говорит «берём Next.js», остановиться и спросить себя, нужен ли он на самом деле, прежде чем соглашаться, — первый профессиональный шаг. Next.js — мощный инструмент, но первому проекту он может быть не нужен.
FAQ
Да. Next.js стоит на React, поэтому основы (компоненты, props, state) обязательны. Порядок «официальные учебные страницы React → простая SPA на Vite → потом Next.js» помогает не путать, что относится к React, а что — к Next.js.
Имена похожи, но это разные вещи. React Native — для мобильных приложений (iOS/Android), Next.js — фреймворк для веб-приложений. Если нужно мобильное приложение, посмотрите на Expo — его документация React называет для нативных приложений.
Можно, но у каждого провайдера свои условия. Бесплатный тариф Cloudflare Pages допускает 500 сборок в месяц (официальные лимиты); тариф Free у Netlify — 300 кредитов в месяц с остановкой при достижении лимита (для аккаунтов, созданных с сентября 2025 года). Статический экспорт можно опубликовать где угодно, где раздаются статические файлы. Условия бесплатных тарифов собраны в статье Что такое PaaS (Vercel и др.).
По умолчанию Server, Client — только для взаимодействия. Всё, что использует useState, useEffect, onClick и т. п., требует 'use client'. Загрузка данных (fetch, база данных) — на сервере. Если сомневаетесь, пишите сначала как Server Component и выносите в Client только то, что выдаёт ошибку.
Да, это одна серия. Инструменты, которые ИИ предлагает как «стандарт» (Docker, Next.js, TypeScript и др.), советуют потому, что ими много пользуются, а не потому, что они обязательно лучше для вас. Новички склонны думать «раз ИИ советует — мне нужно»; смысл статьи — добавить собственное суждение о масштабе, целях и этапе обучения.
