Cursor для Next.js: App Router, серверные компоненты и агент

Коротко

Next.js (App Router) легко «ломается» агентом: "use client" не там, fetch на клиенте, секреты в бандле. В Cursor это лечится хорошими Rules, точным @ контекстом и короткими итерациями.

Стек NeiroCursor сам на Next — приёмы ниже боевые.

Минимальные Rules для Next.js

Создайте .cursor/rules / project rules roughly:

- App Router: Server Components по умолчанию
- "use client" только если нужны хуки/браузерные API
- Секреты только на сервере (route handlers / server actions)
- Не предлагай pages/ router для новых фич
- Tailwind: следуй существующим классам проекта

Полный гайд по rules: Cursor Rules.

Типичный workflow

1. @app/(routes)/.../page.tsx + нужные components/
2. Промпт: «добавь секцию X, Server Component, данные из lib/…, без новых зависимостей»
3. Проверьте diff: нет ли случайного "use client" на всей странице
4. npm run build локально или в терминале Cursor
5. Деплой — Beget VPS или ваш CI

Промпты, которые работают

Новая страница:

@app @src/components
Добавь /pricing: Server Component, данные из lib/pricing.ts,
мобильная вёрстка в стиле существующих страниц. Без новых UI-библиотек.

Баг RSC:

@app/dashboard/page.tsx
Ошибка: window is not defined. Найди клиентский код и вынеси в Client Component минимально.

SEO metadata:

@app/blog/[slug]/page.tsx
Добавь generateMetadata с title/description из frontmatter, canonical на siteConfig.url.

Частые ошибки агента в Next.js

Ошибка	Что сделать
Всё сделал client	Явно запретить в промпте и rules
Полез в pages/	Указать App Router only
Захардкодил API key	Дать .env.example, запретить секреты
Сломал layout	Ограничить список файлов @
Игнорирует ваш UI-kit	Дать 1–2 эталонных компонента в @

Индексация Next-репо

В .cursorignore обычно:

.next
node_modules
out
coverage
*.tsbuildinfo

Иначе индекс шумит, Tab и @codebase тупеют. Подробнее: .cursorignore.

Связка с деплоем

После фичи агентом:

1. build;
2. проверка env на сервере;
3. деплой по вашему гайду — сайт на VPS.

Пример Rules-блока под NeiroCursor-подобный сайт

- Next.js App Router + TypeScript
- UI: существующие компоненты, без новых UI-kit
- SEO: metadata/generateMetadata на страницах контента
- MDX гайды в content/guides — не ломай frontmatter
- Не добавляй зависимости без явной просьбы

Проверка после правок агента

1. npm run build
2. Открыть затронутые URL
3. Lighthouse/ручной взгляд на mobile только если меняли вёрстку
4. Не деплоить «потому что Agent сказал ок»

Практический мини-кейс

1. Возьмите реальный небольшой баг или задачу из вашего бэклога (30–60 минут работы руками).
2. Сначала решите её без Agent — только Tab/Chat, чтобы почувствовать потолок.
3. Затем откатите изменения в git и решите с Agent и явным @ контекстом.
4. Сравните: время, качество diff, сколько usage ушло, сколько правок пришлось откатить.
5. Зафиксируйте в Rules команды 2–3 правила, которые сэкономили больше всего времени.

Такой прогон один раз калибрует ожидания лучше любой теории.

FAQ

Cursor понимает Server Actions?

Да, если дать актуальный @docs/пример из проекта. Без примера может предложить устаревший паттерн.

Можно ли генерировать весь сайт одним Agent?

Можно, но дешевле итерациями: layout → страница → API → полировка.

Нужен ли Pro?

Для ежедневного App Router + Agent — обычно да. См. тарифы.

Что дальше

• MCP в Cursor
• Деплой на Beget
• Контекст @