Что такое Next.js
Next.js — фреймворк на основе React. React умеет только рисовать интерфейс из компонентов, а всё остальное — адреса страниц, загрузку данных, работу на сервере, сборку — приходится собирать самому. Next.js даёт это сразу и задаёт единую структуру проекта.
Версия
Курс написан для Next.js 16 с App Router — современным способом описывать страницы через папку app/. Вместе с ним используются React 19.2 и TypeScript. Если вы встретите статью о Next.js 15, большая часть кода подойдёт, но некоторые вещи в 16 переименованы или изменены — в уроках об этом сказано отдельно. В старых статьях можно встретить папку pages/ и функции getServerSideProps — это прежний Pages Router, в курсе он не используется.
Что добавляет Next.js
| Задача | Чистый React | Next.js |
|---|---|---|
| Адреса страниц | Отдельная библиотека маршрутов | Папки и файлы в app/ |
| HTML для поисковиков | Страница пустая до запуска JS | HTML готовится на сервере |
| Загрузка данных | useEffect и fetch в браузере | await прямо в компоненте на сервере |
| Обработка форм | Свой API-сервер | Серверные действия |
| API | Отдельный проект | Файлы route.ts |
| Картинки, шрифты, SEO | Вручную | Готовые компоненты и настройки |
Сервер и браузер
Главное отличие от курса React: часть компонентов выполняется на сервере. Такой компонент может прочитать базу данных или секретный ключ, а в браузер уходит уже готовый HTML. Компоненты с состоянием и обработчиками событий, как и раньше, работают в браузере. Обоим видам посвящён отдельный урок.
Учебный проект
Через весь курс строится небольшой блог:
- главная страница со списком статей;
- страница статьи по адресу
/posts/hello-nextjs; - форма добавления статьи;
- комментарии к статьям.
Каждый урок добавляет к блогу одну возможность.
Когда Next.js не нужен
Если приложение целиком живёт за входом в систему и поисковикам не нужно, хватит React и сборщика Vite. Next.js полезен там, где важны быстрая первая загрузка, SEO и серверный код рядом с интерфейсом: блоги, магазины, сайты компаний, личные кабинеты.
Частая ошибка
Искать ответ в документации или статьях про Pages Router. Код с getStaticProps, next/router и папкой pages/ к App Router не подходит. Проверяйте, что материал относится к App Router: на сайте документации Next.js переключатель вверху меню должен стоять на App Router.