TypeScript + Next.js промты: как собрать продакшен-приложение быстрее, чем команда обсуждает архитектуру

Разработка на Next.js и TypeScript в 2026 году — это уже не просто «написать код». Это умение формулировать задачи так, чтобы AI-ассистент генерировал не абстрактные сниппеты, а рабочие компоненты, API-роуты и серверные экшены, которые можно сразу коммитить. По данным Stack Overflow Developer Survey 2025, TypeScript четвёртый год подряд остаётся одним из самых используемых языков, а Next.js входит в топ-5 веб-фреймворков. При этом скорость разработки ограничивается не знанием синтаксиса, а временем на проектирование и написание шаблонного кода.

В этой подборке — 15 промтов, которые я собрал из реальной практики разработки SaaS-продукта на Next.js 15 (App Router). Они покрывают генерацию компонентов, строгую типизацию, работу с API-роутами, серверными экшенами, оптимизацию и отладку. Каждый промт проверен на живом проекте: я показываю, что именно вводить, какой результат ожидать и на что обратить внимание, чтобы не получить галлюцинацию вместо кода.

Почему промты для Next.js и TypeScript работают иначе

Когда вы просите AI написать «компонент корзины», вы получаете усреднённый ответ из туториалов 2023 года. Когда вы просите «компонент корзины на Next.js 15 App Router с использованием use client, типизацией пропсов через interface и серверным экшеном для обновления количества» — вы получаете код, который почти готов к использованию. Разница — в контексте. Чем точнее вы описываете версию фреймворка, структуру директорий, менеджер состояния и требования к типам, тем меньше правок после генерации.

Основные категории промтов, которые мы разберём:

Базовые промты: компоненты и типизация

1. Генерация типизированного React-компонента

Задача: быстро создать переиспользуемый компонент кнопки с вариантами стилей и строгой типизацией.

Промт:

Напиши React-компонент Button на TypeScript для Next.js 15 (App Router).
Требования:
- Пропсы: variant ('primary'

| 'secondary' | 'ghost'), size ('sm' | 'md' | 'lg'), children, onClick, disabled, type.
- Использовать class-variance-authority (cva) для вариантов.
- Не использовать any. Экспортировать тип ButtonProps.
- Компонент серверный, без 'use client', если не требуется интерактивность.

Результат: вы получаете файл components/ui/Button.tsx с cva-конфигурацией и типом ButtonProps. Пример вывода:

import { cva, type VariantProps } from 'class-variance-authority';

const button = cva('rounded font-medium transition', {
  variants: {
    variant: {
      primary: 'bg-blue-600 text-white hover:bg-blue-700',
      secondary: 'bg-gray-200 text-gray-900',
      ghost: 'bg-transparent hover:bg-gray-100',
    },
    size: { sm: 'px-2 py-1 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' },
  },
  defaultVariants: { variant: 'primary', size: 'md' },
});

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof button>;

export function Button({ variant, size, className, ...props }: ButtonProps) {
  return <button className={button({ variant, size, className })} {...props} />;
}

Почему это работает: вы явно указали библиотеку cva, версию Next.js и запретили any. Без этого AI часто генерирует компонент с инлайн-стилями и any в пропсах.

2. Типизация ответа API без ручного написания интерфейсов

Задача: получить TypeScript-типы для JSON-ответа внешнего API.

Промт:

Вот пример JSON-ответа от API /users:
{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "roles": ["admin", "user"],
  "profile": { "bio": null, "avatar": "https://..." }
}
Сгенерируй TypeScript-интерфейс User. Учти, что bio может быть null, avatar — опционально.
Добавь функцию-парсер, которая валидирует ответ и возвращает User или выбрасывает ошибку.

Результат: интерфейс + функция parseUser с проверками. Это экономит 10–15 минут ручной работы и снижает риск ошибок в рантайме.

3. Генерация формы с валидацией через Zod

Задача: форма регистрации с клиентской и серверной валидацией.

Промт:

Создай форму регистрации на Next.js 15 с react-hook-form и Zod.
Поля: email, password (мин. 8 символов), confirmPassword.
Валидация: email — формат, password — минимум 8 символов и хотя бы одна цифра, confirmPassword — совпадение с password.
Покажи схему Zod, компонент формы и серверный экшен для отправки.

Результат: три файла: schema.ts, RegisterForm.tsx, actions.ts. Важно: AI по умолчанию может использовать z.string().email(), который в Zod 3.22+ помечен как deprecated — проверьте и замените на z.email(), если используете свежую версию.

4. Промт для генерации layout с метаданными

Задача: создать корневой layout с SEO-метаданными для Next.js App Router.

Промт:

Напиши app/layout.tsx для Next.js 15. Требования:
- Метаданные: title, description, openGraph.
- Подключить шрифт Inter через next/font/google.
- Обернуть children в <html lang="en"> и <body>.
- Добавить suppressHydrationWarning, если планируется тёмная тема.

Результат: готовый layout с типом Metadata из next. Не забудьте, что next/font требует указания subsets: ['latin'].

Продвинутые промты: API-роуты и серверные экшены

5. Генерация API-роута с валидацией и обработкой ошибок

Задача: создать эндпоинт для создания задачи с проверкой входных данных.

Промт:

Создай API-роут POST /api/tasks в Next.js 15 App Router.
Требования:
- Валидация тела через Zod (title: string min 3, dueDate: string ISO).
- Возвращать 400 при ошибке валидации с деталями.
- Возвращать 201 с созданной задачей.
- Использовать Prisma для записи в БД.
- Обработать ошибку уникальности.

Результат:

import { NextResponse } from 'next/server';
import { z } from 'zod';
import { prisma } from '@/lib/prisma';

const schema = z.object({ title: z.string().min(3), dueDate: z.string().datetime() });

export async function POST(req: Request) {
  const body = await req.json();
  const parsed = schema.safeParse(body);
  if (!parsed.success) {
    return NextResponse.json({ errors: parsed.error.flatten() }, { status: 400 });
  }
  try {
    const task = await prisma.task.create({ data: parsed.data });
    return NextResponse.json(task, { status: 201 });
  } catch (e) {
    return NextResponse.json({ error: 'Task already exists' }, { status: 409 });
  }
}

Совет: явно указывайте, что нужно использовать NextResponse из next/server, иначе AI может сгенерировать Response.json() — это тоже работает, но NextResponse даёт больше возможностей.

6. Серверный экшен для мутации данных

Задача: обновить статус заказа без создания отдельного API-роута.

Промт:

Напиши серверный экшен updateOrderStatus в Next.js 15.
Входные данные: orderId (string), status ('pending'

| 'shipped' | 'delivered').
Экшен должен:
- Проверять авторизацию через getServerSession (NextAuth).
- Валидировать статус через Zod.
- Обновлять заказ в Prisma.
- Вызывать revalidatePath('/orders').
- Возвращать { success: true } или { error: string }.

Результат: функция с директивой 'use server'. Обратите внимание: revalidatePath импортируется из next/cache.

7. Промт для middleware с защитой роутов

Задача: ограничить доступ к админ-панели.

Промт:

Создай middleware.ts для Next.js 15.
Правила:
- Все пути /admin/* требуют аутентификации (проверка cookie session).
- Если пользователь не авторизован — редирект на /login.
- Публичные пути: /, /login, /api/auth/*.
- Использовать matcher для исключения статики.

Результат: middleware с NextResponse.redirect. Убедитесь, что matcher не блокирует _next/static и favicon.ico.

8. Промт для пагинации и фильтрации на сервере

Задача: реализовать поиск с пагинацией через серверный компонент.

Промт:

Создай серверный компонент ProductList для Next.js 15.
Он принимает searchParams: { page?: string; query?: string }.
Требования:
- Использовать Prisma с skip/take.
- Возвращать список продуктов и общее количество.
- Отображать кнопки пагинации.
- Типизировать searchParams как Promise<{ page?: string }> (Next.js 15 изменил API).

Важно: в Next.js 15 searchParams стал асинхронным. AI может сгенерировать синхронный доступ — проверяйте.

Экспертные промты: оптимизация, отладка и архитектура

9. Анализ и исправление ошибок типов

Задача: быстро понять, почему TypeScript ругается на код.

Промт:

У меня ошибка TypeScript:
Type 'Promise<{ id: string }>' is not assignable to type '{ id: string }'.
Вот код:
const user = getUser(); // getUser возвращает Promise<User>
console.log(user.id);
Объясни причину и предложи два варианта исправления: с await и с .then().

Результат: объяснение + исправленный код. Это быстрее, чем гуглить сообщение об ошибке.

10. Оптимизация изображений и шрифтов

Задача: улучшить Core Web Vitals.

Промт:

Проанализируй мой компонент Hero. Предложи, как заменить <img> на next/image, настроить sizes и priority. Покажи diff.

Результат: AI предложит использовать next/image с priority для LCP-изображения и sizes для адаптивности. По данным Web Almanac 2024, использование next/image корректно настроенного может улучшить LCP на 20–30% (точные цифры зависят от проекта).

11. Промт для code review

Задача: проверить пул-реквест на антипаттерны.

Промт:

Проверь этот код на антипаттерны Next.js 15:
[вставить код]
Обрати внимание на:
- Неправильное использование 'use client'.
- Отсутствие мемоизации в тяжёлых компонентах.
- Потенциальные утечки памяти в useEffect.
- Неоптимальные запросы к БД.

Результат: список замечаний с приоритетами. Особенно полезно для junior-разработчиков.

12. Генерация тестов с Vitest и Testing Library

Задача: покрыть компонент тестами.

Промт:

Напиши тесты для компонента Button с Vitest и @testing-library/react.
Проверь:
- Рендер с текстом.
- Вызов onClick.
- Применение класса variant='secondary'.
- Отключённое состояние.

Результат: файл Button.test.tsx с 4 тестами.

13. Промт для рефакторинга большого компонента

Задача: разбить монолитный компонент на части.

Промт:

Разбей этот компонент Dashboard (300 строк) на:
- Контейнер (серверный компонент).
- Презентационные компоненты (StatsCard, Chart, RecentActivity).
- Хук useDashboardData для загрузки данных.
Сохрани логику и типы.

Результат: структура файлов + код. AI предложит вынести состояние и запросы в хук, а UI — в отдельные компоненты.

14. Промт для настройки кэширования

Задача: использовать новый API use cache (Next.js 15 canary) или unstable_cache.

Промт:

Покажи, как закэшировать результат запроса к БД на 60 секунд в Next.js 15.
Используй unstable_cache из next/cache. Объясни, как инвалидировать кэш по тегу.

Результат: пример с unstable_cache и revalidateTag. Учтите, что API может меняться — сверяйтесь с официальной документацией nextjs.org/docs.

15. Промт для миграции с Pages Router на App Router

Задача: перенести старый проект.

Промт:

У меня есть страница pages/products/[id].tsx с getServerSideProps.
Покажи, как переписать её на app/products/[id]/page.tsx с использованием серверного компонента и fetch.
Объясни разницу в получении params.

Результат: пошаговая инструкция + код. В App Router params — это промис, который нужно await.

Сравнение подходов: промт vs ручное написание

Оценки основаны на моём опыте разработки; в вашем случае цифры могут отличаться.

Как не получить галлюцинации: чек-лист

1. Указывайте версию фреймворка. Next.js 15 отличается от 14: асинхронные searchParams, params, изменения в кэшировании.
2. Запрещайте any. Фраза «не используй any, типизируй явно» работает.
3. Просите объяснить код. «Добавь комментарии, объясняющие неочевидные места» — поможет отловить ошибки.
4. Проверяйте deprecated API. Zod, Next.js, React обновляются — AI может использовать устаревшие методы.
5. Давайте контекст проекта. Структура папок, используемая ORM, менеджер пакетов — всё это влияет на результат.

Вывод

Промты для Next.js и TypeScript — это не замена разработчику, а ускоритель. Они снимают рутину: написание типов, шаблонных компонентов, обработчиков. Но архитектурные решения, выбор между серверными и клиентскими компонентами, оптимизация под конкретный проект — остаются за вами. Используйте эти 15 промтов как стартовую точку, адаптируйте под свой стек и всегда проверяйте сгенерированный код. В 2026 году выигрывают не те, кто пишет больше кода, а те, кто быстрее формулирует задачи.

Если хотите глубже разобраться в TypeScript, Next.js и AI-ассистированной разработке — посмотрите другие материалы на asibiont.com/blog. Там есть разборы по Docker, DevOps и алгоритмам, которые дополнят эту подборку.