Создание проекта

Проект Next.js создаёт официальная утилита create-next-app. Она скачивает фреймворк, настраивает TypeScript, линтер и стили и кладёт стартовую страницу. Next.js 16 требует Node.js 20.9 или новее, лучше — актуальную LTS-версию.

Создание

npx create-next-app@latest blog

Сначала утилита спросит, использовать ли рекомендуемые настройки. Ответ «Yes, use recommended defaults» подходит для курса: он включает TypeScript, ESLint, Tailwind CSS, App Router и псевдоним импорта @/*. Если выбрать свои настройки, ответьте так:

Вопрос	Ответ
TypeScript	Yes
Linter	ESLint
React Compiler	No
Tailwind CSS	Yes
`src/` directory	No
App Router	Yes
Import alias	No (останется `@/*`)
AGENTS.md	На ваш выбор

Вопроса о Turbopack нет: в Next.js 16 этот быстрый сборщик включён по умолчанию.

Запуск

cd blog
npm run dev

Команда запускает сервер разработки. Откройте http://localhost:3000 — появится стартовая страница Next.js. Сервер следит за файлами: после сохранения изменения сразу видны в браузере.

Структура проекта

blog/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── AGENTS.md
├── eslint.config.mjs
├── next.config.ts
├── package.json
└── tsconfig.json

Файл или папка	Что внутри
`app/`	Страницы, макеты и API — основная работа идёт здесь
`app/page.tsx`	Главная страница, адрес `/`
`app/layout.tsx`	Корневой макет: общий HTML для всех страниц
`app/globals.css`	Общие стили
`public/`	Файлы, которые отдаются как есть: картинки, `robots.txt`
`next.config.ts`	Настройки Next.js
`eslint.config.mjs`	Правила линтера ESLint
`AGENTS.md`	Подсказки для ИИ-помощников; на работу сайта не влияет

Папки для своего кода — components/ для компонентов и lib/ для функций — создают в корне проекта рядом с app/.

Команды

Скрипты лежат в package.json:

npm run dev     # сервер разработки
npm run build   # сборка для продакшена
npm run start   # запуск собранного приложения
npm run lint    # проверка кода линтером (запускает eslint)

В Next.js 16 команды next lint больше нет: скрипт lint вызывает ESLint напрямую, а npm run build линтер не запускает.

Псевдоним @

Проект создан с настройкой @/* в tsconfig.json. Она позволяет писать пути от корня проекта вместо длинных ../../:

// app/page.tsx
import { getPosts } from '@/lib/posts';

Такой импорт работает из любой папки проекта.

Частая ошибка

Запускать npm run dev из родительской папки, а не из папки проекта. Команда ищет package.json в текущей папке и без него завершится ошибкой «Missing script: dev». Сначала перейдите в папку проекта командой cd blog.

Спасибо, что читаете!