Создание Next.js 16 проекта через Claude Code

Что такое Next.js 16

Next.js — это фреймворк для построения сайтов на React, и он удобен сразу по нескольким причинам. В нём один фреймворк отвечает и за интерфейс, и за серверную часть, поэтому не нужно держать два отдельных проекта — сервер и SPA. Серверный рендеринг означает, что страницы быстро открываются и хорошо индексируются поисковиками. API routes позволяют писать серверные эндпоинты прямо внутри проекта, а App Router задаёт современную структуру страниц через папки. Наконец, hot reload обновляет страницу в браузере сразу же, как только вы меняете код.

16-я версия — последняя стабильная. Из основных изменений: middleware переименован в proxy, Turbopack включён по умолчанию (быстрая сборка), улучшена работа с серверными компонентами.

Tailwind CSS v4 — стили без CSS

Вместо отдельных CSS-файлов Tailwind даёт классы прямо в разметке:

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">

Никаких файлов вроде button.css — все стили лежат рядом с разметкой. Это основной способ работы современных React-приложений. Четвёртая версия быстрее предыдущих, в ней проще конфигурация, и всё строится через CSS-переменные.

shadcn/ui — готовые компоненты

shadcn/ui — это не библиотека компонентов, а коллекция. Вы копируете компонент к себе в проект и полностью им владеете — правите как угодно. В наборе уже есть кнопки, формы, модальные окна, навигация, панели, диалоги. Дизайн современный и минималистичный, он подходит большинству ИИ-сервисов без переработки.

TypeScript — что и зачем

TypeScript — это JavaScript с типами. Если передать функции число вместо строки, TypeScript сразу предупредит, что что-то не так. В обычном JavaScript ту же ошибку заметили бы только тогда, когда что-то уже сломалось у пользователя.

Для вайбкодинга это особенно важно: Claude Code пишет много кода, а типы помогают агенту самому замечать ошибки и исправлять их ещё до запуска. В итоге меньше багов на ровном месте.

Промпт для создания проекта

Создай Next.js 16 проект в текущей папке. Стек:
- TypeScript
- Tailwind CSS v4
- shadcn/ui (инициализируй)
- App Router

Структура:
- src/app — страницы (App Router)
- src/components — UI компоненты
- src/lib — утилиты и хелперы
- src/lib/store — Zustand-сторы для клиентского состояния

После создания:
- Инициализируй git
- Сделай первый коммит «initial scaffold»
- Запусти `npm run dev` для проверки что всё работает
- Открой localhost:3000 в браузере

Claude Code пройдёт все шаги сам: запустит npx create-next-app@latest, ответит на интерактивные вопросы, установит shadcn, создаст папки, сделает первый коммит и запустит сервер. В результате у вас будет рабочий проект.

Что в проекте получится

Сразу после создания в проекте появятся ключевые файлы:

• src/app/page.tsx — главная страница (пока с дефолтным контентом)
• src/app/layout.tsx — общий layout (header, footer, метаданные)
• src/app/globals.css — глобальные стили с Tailwind
• src/components/ui/ — готовые компоненты shadcn (Button, Input, Card, и т.д.)
• package.json — список зависимостей
• tsconfig.json — настройки TypeScript
• tailwind.config.ts — настройки Tailwind
• .gitignore — что не идёт в git (node_modules, .env, .next)

Создание CLAUDE.md

Сразу после создания проекта добавьте файл CLAUDE.md с описанием набора технологий. Это важно для последующих сессий: благодаря ему Claude Code будет помнить контекст проекта и не переспрашивать одно и то же.

Создай в корне проекта CLAUDE.md со следующим содержимым:

# ИИ-генератор постов — Project Context

## Стек
Next.js 16 (App Router) + TypeScript
Tailwind CSS v4 + shadcn/ui
Postgres + Prisma + Auth.js v5 (БД и авторизация) — подключим позже
OpenRouter API — подключим позже

## Структура
src/app — страницы App Router
src/components — UI компоненты
src/lib — утилиты

## Конвенции
Компоненты — PascalCase
Стили — только Tailwind, не CSS-модули
UI копи — на русском

Если что-то пошло не так

На первом запуске иногда всплывают типовые ошибки. Вот как их распознать и что делать:

• «command not found: npx» — нет Node.js. Установите с nodejs.org (LTS-версия)
• «Permission denied» — папка не ваша или нет прав. Создайте новую папку в ~/projects/ через mkdir
• «Cannot find module 'tailwindcss'» — пакет не установился. Запустите npm install вручную в корне проекта
• Порт 3000 занят — Next.js скажет «using port 3001». Это нормально, открывайте 3001

Что в следующем уроке

У вас готов рабочий, но пока пустой проект. Дальше начинаем наполнять его страницами: на уроке 22 собираем главную страницу и страницу тарифов.