Next.js + AI: создаём веб-приложение с нуля через Vibe Coding

Next.js стал де-факто стандартом для современных веб-приложений на React. Но что делает его особенно подходящим для разработки с AI? Три вещи: предсказуемая структура, файловый роутинг и встроенные API-маршруты. Когда AI-ассистент видит проект на Next.js, он мгновенно понимает, где лежат страницы, где серверная логика, где компоненты — потому что это конвенции, а не решения каждой отдельной команды.

Файловый роутинг App Router означает, что создание новой страницы — это создание файла page.tsx в нужном каталоге. AI-ассистент делает это за секунды. API Routes позволяют писать серверную логику прямо в проекте, без отдельного бэкенда. Server Components и Server Actions ещё больше упрощают архитектуру — меньше кода, меньше ошибок, быстрее разработка.

Откройте терминал и запустите Claude Code в пустом каталоге. Дайте ему промпт: "Создай новый Next.js проект с App Router, TypeScript, Tailwind CSS и PostgreSQL через Prisma. Это будет приложение для управления задачами с авторизацией." Claude Code выполнит npx create-next-app, установит зависимости, настроит Tailwind и создаст начальную структуру.

Ключевой момент — давать контекст в самом начале. AI-ассистент должен знать не только стек, но и бизнес-логику. Опишите, что приложение должно делать, какие сущности в нём будут, кто целевые пользователи. Чем больше контекста в первом промпте, тем меньше переделок потом.

В App Router каждый маршрут — это папка внутри src/app/. Файл page.tsx определяет содержимое страницы, layout.tsx — обёртку с навигацией и общими элементами, loading.tsx — скелетон при загрузке, error.tsx — обработку ошибок. Эта структура невероятно удобна для AI — каждый файл имеет чёткую ответственность.

Основные маршруты приложения задач

• src/app/page.tsx — главная страница с дашбордом задач
• src/app/auth/login/page.tsx — страница входа
• src/app/auth/register/page.tsx — регистрация нового пользователя
• src/app/tasks/page.tsx — список всех задач с фильтрацией
• src/app/tasks/[id]/page.tsx — детальная страница задачи
• src/app/tasks/new/page.tsx — создание новой задачи
• src/app/settings/page.tsx — настройки профиля пользователя

Попросите Claude Code создать всю эту структуру одним запросом. Он создаст каталоги, файлы с базовой разметкой, layout с навигацией и переключением между страницами. Каждая страница будет Server Component по умолчанию — это означает прямой доступ к базе данных без API-слоя.

Prisma — это ORM для TypeScript, который генерирует типизированный клиент на основе схемы. Попросите Claude Code описать модели в schema.prisma: User, Task, Category, Comment. Укажите связи между ними — пользователь создаёт задачи, задача принадлежит категории, к задаче можно оставлять комментарии.

После определения схемы Claude Code выполнит npx prisma migrate dev для создания миграции и применения её к базе данных, затем npx prisma generate для генерации TypeScript-клиента. Теперь в коде доступен полностью типизированный prisma.task.findMany() с автокомплитом всех полей.

В Next.js 15+ есть два подхода к серверной логике. API Routes — это HTTP-эндпоинты, которые живут в src/app/api/. Server Actions — это функции с директивой "use server", которые вызываются напрямую из компонентов, как обычные функции, но выполняются на сервере. Для нашего приложения мы используем оба подхода.

API Routes — для внешних интеграций

Создайте src/app/api/tasks/route.ts для CRUD-операций с задачами. GET-запрос возвращает список задач, POST — создаёт новую. В src/app/api/tasks/[id]/route.ts — PUT для обновления и DELETE для удаления. Эти эндпоинты пригодятся для мобильного приложения, интеграций и вебхуков.

Server Actions — для фронтенда

Для форм и интерактивных элементов используйте Server Actions. Создайте файл src/app/actions/tasks.ts с функциями createTask, updateTask, deleteTask, toggleComplete. Каждая функция помечена "use server" и работает с Prisma напрямую. В компонентах эти функции вызываются через form action или onClick — без fetch, без API-слоя.

Попросите Claude Code реализовать валидацию данных через Zod в каждом Server Action. Zod-схемы гарантируют, что данные от пользователя корректны перед записью в базу. Типы из Zod автоматически выводятся — double win для типобезопасности.

Для продакшена вам понадобится реальная база данных. Варианты: Supabase (бесплатный тир с PostgreSQL), Neon (serverless PostgreSQL), Railway, или собственный сервер. Настройте переменную DATABASE_URL в .env — Claude Code знает, что этот файл нельзя коммитить, и автоматически проверит .gitignore.

Для локальной разработки можно использовать Docker с PostgreSQL. Попросите Claude Code создать docker-compose.yml с PostgreSQL и pgAdmin. Одна команда docker compose up — и база готова. Prisma подключится через DATABASE_URL=postgresql://user:pass@localhost:5432/tasks.

Tailwind CSS — естественный выбор для vibe coding. AI-ассистенты отлично знают утилитарные классы и генерируют красивый UI с первой попытки. Но не останавливайтесь на дефолтных стилях — настройте тему в tailwind.config.ts: цвета бренда, кастомные шрифты, spacing. Дайте Claude Code референс дизайна или описание стиля: "минималистичный, тёмная тема, акцент на зелёном, без скругленных углов".

• Установите shadcn/ui для готовых компонентов: кнопки, формы, диалоги, таблицы
• Настройте тёмную тему через CSS-переменные в globals.css
• Используйте Inter или Geist для типографики — они отлично работают в UI
• Добавьте Framer Motion для анимаций: fade-in при загрузке, slide-in при навигации
• Сделайте responsive-дизайн — Tailwind grid + flex для адаптивной раскладки

Для авторизации используйте NextAuth.js (Auth.js). Попросите Claude Code настроить email/password провайдер с хешированием через bcrypt и JWT-сессиями. Middleware в middleware.ts защитит приватные маршруты — пользователь без авторизации будет перенаправлен на страницу входа.

Для продвинутых сценариев добавьте OAuth-провайдеры: Google, GitHub. Auth.js поддерживает их из коробки — нужно лишь создать приложения в соответствующих консолях и добавить CLIENT_ID и CLIENT_SECRET в .env. Claude Code может даже подсказать, где именно создать OAuth-приложение и какие redirect URI указать.

Vercel — нативная платформа для Next.js. Деплой через CLI: npx vercel. Или подключите GitHub-репозиторий — каждый push в main автоматически деплоится. Preview deployments для pull requests позволяют тестировать изменения перед мержем.

Альтернативные варианты деплоя

• VPS с pm2: полный контроль, но требует настройки nginx и SSL
• Railway: простой деплой с бесплатным тиром для хобби-проектов
• Cloudflare Pages: edge-рендеринг для максимальной скорости
• Docker: контейнеризация для предсказуемого окружения на любом хостинге

После деплоя попросите Claude Code провести аудит: проверить размер бандла через @next/bundle-analyzer, настроить кеширование через revalidate в Server Components, добавить метатеги для SEO, настроить Open Graph для соцсетей. Каждый из этих шагов — один промпт Claude Code.

Для мониторинга подключите Sentry (ошибки), Vercel Analytics (перформанс) или PostHog (продуктовая аналитика). Claude Code установит пакеты, настроит провайдеры и обернёт приложение в необходимые обёртки.

Весь процесс — от пустого каталога до работающего приложения с авторизацией, базой данных, красивым UI и деплоем — занимает около 3 часов с AI-ассистентом. Без AI на это ушло бы 2-3 дня. Но главное не скорость, а качество: каждый шаг проверен, типизирован, покрыт обработкой ошибок. AI не просто генерирует код — он помогает делать его правильно.

Vibe coding с Next.js — это не магия. Это навык, который развивается с практикой. Чем точнее ваши промпты, чем лучше вы понимаете архитектуру, тем мощнее результат. Начните с простого CRUD, потом добавьте авторизацию, потом интеграции — и через месяц вы будете строить приложения, которые раньше требовали целой команды.