Суть в двух абзацах
Next.js — это React плюс три добавки
React (урок 0018) — это библиотека для построения интерфейса из компонентов. Next.js — это фреймворк (готовая структура с правилами), который берёт React за основу и добавляет к нему то, чего у «голого» React нет.
Три главных добавки Next.js:
1. Файловая маршрутизация (routing) — структура папок и файлов в проекте автоматически задаёт адреса страниц (URL-маршруты). Создали папку app/about/page.js — появился маршрут /about. Не нужно настраивать вручную.
2. Рендеринг на сервере — SSR и SSG (из предыдущего урока) встроены и работают из коробки.
3. Серверные и клиентские компоненты — самая важная часть, которую разберём подробно ниже.
Именно поэтому в уроке 0001 Next.js сравнивали с «рестораном под ключ»: приходишь и начинаешь работать, а не строишь кухню с нуля.
Серверные и клиентские компоненты: главное, на чём спотыкаются
В современном Next.js (App Router) компоненты по умолчанию серверные. Это означает: они выполняются на сервере, а не в браузере пользователя.
Серверный компонент может напрямую обращаться к базе данных, читать файлы, делать защищённые запросы — и всё это остаётся на сервере. В браузер уходит только готовый HTML-результат, а не JavaScript-код самого компонента. Это быстрее и безопаснее: ключи от базы, секретные токены, тяжёлые библиотеки не путешествуют до пользователя.1
Но серверный компонент не умеет реагировать на действия пользователя. Если внутри него написать useState (состояние из урока 0019) или обработчик клика — Next выдаст ошибку. Причина простая: состояние и обработчики работают в браузере, а этот компонент живёт на сервере.
Решение — директива "use client" в начале файла. Она сигнализирует Next.js: этот компонент клиентский, его нужно отправить в браузер и там выполнять. Только тогда внутри можно использовать состояние, обработчики кликов, ввод с клавиатуры.
"use client"
// Эта директива в начале файла делает компонент клиентским —
// теперь внутри можно использовать состояние и обработку кликов
import { useState } from "react"
export default function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}Без "use client" в App Router компонент серверный. Директива в первой строке файла делает его клиентским — интерактивным.
📌 Практическое правило: увидели ошибку «useState is not allowed in Server Components» или «You cannot use hooks here» — значит, компонент серверный, но просит клиентский функционал. Решение: добавить "use client" в самое начало файла, до всех импортов.
Когда Next, а когда нет
| Ситуация | Рекомендация | Почему |
|---|---|---|
| Нужен SEO или быстрый первый показ публичный сайт, блог, каталог |
Next.js ✓ | SSR/SSG встроены; поисковики видят готовый HTML |
| Фронтенд и серверная часть вместе API-маршруты, работа с базой |
Next.js ✓ | Один проект вместо двух; серверные компоненты обращаются к базе напрямую |
| Маршрутизация нужна сразу несколько страниц, навигация |
Next.js ✓ | Файловый роутинг работает из коробки |
| Простой SPA или внутренний инструмент за логином дашборд, личный кабинет без SEO |
React + Vite | Меньше конфигурации, быстрее запуск, SEO не нужен |
| Чисто статический сайт лендинг из одной страницы без данных |
Простой генератор или чистый HTML | Next — избыточен; лишняя сложность без пользы |