Настраиваем Cursor под Next.js и React, чтобы агент не писал устаревший код

16 мин. чтения
BYBIT EARN
Крипта лежит?
Bybit Earn: процент капает каждый день
Открыть Earn

Попросите Cursor «сделать страницу профиля на Next.js», и с высокой вероятностью он выдаст рабочий на вид код, который на актуальном проекте просто не соберётся. Внутри окажется getServerSideProps, синхронный доступ к params, конфиг Tailwind через tailwind.config.js — паттерны, которых в свежем Next.js уже нет. Причина не в том, что «Cursor плохой»: причина в том, что мы не дали ему знать, на какой версии стека работаем.

Это ключевая мысль всей статьи. Cursor для веб-разработки — очень сильный инструмент: есть даже разработчики, которые в одиночку собрали на нём пару продакшен-приложений на Next.js и вышли на выручку (кейс с Hacker News на несколько тысяч долларов). Но между «мощный инструмент» и «пишет актуальный код» стоит одна вещь — контекст. Ниже разберём, как этот контекст дать: какие версии считать актуальными, почему ИИ дрейфует к старому синтаксису и как тремя разными способами заставить агента писать по-современному.

Всё, что описано ниже, отрабатывается на бесплатном тарифе — поставить Cursor и попробовать на своём Next.js-проекте стоит сразу: разница «с правилами и без» видна в первый же день.

Актуальный стек на середину 2026 года

Прежде чем настраивать правила, зафиксируем, что вообще считается «современным» — иначе непонятно, от чего отталкивать агента. Все версии волатильны, поэтому даю их с датами.

BYBIT COPY TRADINGКопитрейдинг на BybitОткрытая статистика трейдеров, старт с $10, отключение в один клик.Выбрать трейдера
КомпонентАктуальная версияЧто важно для ИИ-кодинга
Next.js16 (вышел 21 октября 2025), стабильная линейка 16.2, preview 16.3App Router — основной путь, Pages Router переведён в режим поддержки
БандлерTurbopack — по умолчанию с Next.js 162–5× быстрее продакшен-сборка, до 10× быстрее Fast Refresh
React19.2 (1 октября 2025)App Router в Next.js 16 работает на React Canary с фичами 19.2
Tailwind CSSv4 (CSS-first, @theme)конфиг переехал из JS-файла в CSS — частый источник ошибок ИИ
Cursorлинейка 3.x (на июль 2026 — 3.11)продукт обновляется почти еженедельно, фичи правил меняются

Главное отсюда: App Router — это норма, а params, searchParams, cookies() и headers() в Next.js 16 доступны только через await (синхронный доступ убрали). Модель, обученная на коде постарше, про это часто «не знает».

Почему Cursor по умолчанию пишет код 2023 года

Тут нет мистики — работает статистика обучающих данных. В открытом интернете примеров React Class Components и старого Pages Router на порядки больше, чем свежего App Router. Модель по умолчанию идёт по пути наименьшего сопротивления: генерирует то, чего в её данных было больше. Разработчики LogRocket прямо описывают это как «дрейф к самым частым паттернам тренировочных данных — а это часто устаревшие API и архитектура».

Отсюда простое следствие: бороться нужно не с моделью, а с недостатком контекста. Дайте агенту явно понять, какой у вас стек и какие паттерны запрещены, — и дрейф в прошлое прекращается. Ниже три инструмента, которые это делают, от самого «ручного» до самого автоматического.

Три способа дать Cursor актуальный контекст

Их удобно держать в голове как слои, которые дополняют друг друга, а не заменяют.

СпособЧто этоКогда использоватьАктуальность
.cursor/rules/*.mdc (Project Rules)ваши правила проекта в репозиториивсегда — базовый слой под ваш стекактуальный формат Cursor
.cursorrules (корневой файл)старый единый файл правилтолько легаси-проектыdeprecated с версии Cursor 0.43
AGENTS.md + bundled docsуказатель на документацию Next.js внутри node_modulesNext.js 16.2+ — сильнее всего бьёт по устареваниюофициальный механизм Next.js
@Docsиндексирование любой внешней документации по URLподключить react.dev, доки библиотеквстроено в Cursor

Разберём каждый.

Правила проекта: .cursor/rules/*.mdc, а не .cursorrules

Первое, что стоит запомнить: единый корневой файл .cursorrulesлегаси. Cursor называет его устаревшим начиная с версии 0.43; он ещё работает по обратной совместимости, но новые возможности идут только в новый формат, а в свежих релизах бывали баги, когда корневые правила ненадёжно подхватывались.

Современный формат — отдельные .mdc-файлы в папке .cursor/rules. Важная деталь: обычный .md в этой папке игнорируется — нужен именно .mdc с фронтматтером. У каждого правила есть один из четырёх режимов применения:

BYBITВсё ещё смотришь со стороны?Рынок работает без выходных. Счёт на Bybit открывается за 2 минуты.Начать сейчас
  • Always Apply — правило в контексте всегда;
  • Apply Intelligently — агент сам решает по описанию, когда оно уместно;
  • Apply to Specific Files — по glob-маске (например, только *.tsx);
  • Apply Manually — только когда вы упомянули его через @.

И ещё одна рекомендация из официальной документации: не пишите один гигантский файл. Один .cursorrules на десяток подсистем даёт каждой теме меньший «эффективный вес» в контексте. Дробите по темам — стили, тесты, API — и держите каждый файл примерно до 500 строк.

Пример правила под App Router + TypeScript + Tailwind v4

Вот компактное правило, которое закрывает большинство типовых промахов. Файл, скажем, .cursor/rules/nextjs.mdc:

---
description: Конвенции проекта на Next.js 16 App Router
alwaysApply: true
---

- Только App Router (папка app/). Pages Router и getServerSideProps/getStaticProps — запрещены.
- params, searchParams, cookies(), headers() — только через await (Next.js 16 убрал синхронный доступ).
- После мутаций в Server Action обязателен revalidatePath() или revalidateTag().
- Импорты — абсолютные через алиас @/ из tsconfig.json. Относительные вида ../../ — запрещены.
- Tailwind CSS v4: кастомные переменные — через @theme в CSS-файле, не через tailwind.config.js.
- По умолчанию компоненты серверные; 'use client' добавлять только когда реально нужна интерактивность.

Пройдёмся построчно, зачем каждая строка:

  • Запрет Pages Router прямо гасит самый частый дрейф в старый код.
  • await на params/cookies() — под Next.js 16 без этого приложение падает; модель на старых данных пишет синхронный вариант.
  • revalidatePath() — Cursor нередко забывает его после мутации в Server Action, и страница показывает устаревшие данные до ручного обновления. Явное правило это лечит.
  • Абсолютные импорты @/ — конвенция, которую советуют практически все практические гайды; без правила агент лепит хрупкие относительные пути.
  • Tailwind v4 через @theme — модели по умолчанию генерируют синтаксис v3 (tailwind.config.js), потому что их данные старше v4.

Если не хочется писать с нуля — есть большой открытый каталог готовых шаблонов awesome-cursorrules (PatrickJS) с наборами под Next.js/React/TypeScript. Но и их стоит вычитывать: устаревший чужой ruleset хуже, чем его отсутствие — он активно толкает агента к старым паттернам.

AGENTS.md и встроенная документация Next.js

Это самый интересный слой, и его почти нет в обычных гайдах. Next.js начал сам бороться с устареванием обучающих данных: пакет next кладёт версионно-точную документацию прямо внутрь node_modules/next/dist/docs/, а файл AGENTS.md в корне проекта указывает агенту читать именно её, а не свою «память».

Как формулирует официальная документация Next.js: агент получает доступ к документации, которая точно совпадает с установленной у вас версией — «никаких устаревших тренировочных данных, никаких выдуманных API». С версии 16.3 команда next dev сама вписывает и обновляет этот блок инструкций, так что актуальность поддерживается без вашего участия.

Насколько это реально помогает? У Next.js есть открытый бенчмарк на nextjs.org/evals, где влияние измеряют на живых моделях. По данным на 9 июля 2026, доступ к встроенным докам через AGENTS.md поднимает средний success rate агентов примерно с 75% до 90% на задачах Next.js. По отдельным моделям разброс ещё нагляднее: у одной из моделей результат вырос с 58% до 96%, у другой — с 21% до 58%. Это не маркетинговое «в десять раз быстрее», а публичная таблица, которую можно открыть и перепроверить.

@Docs: подключаем react.dev и доки библиотек

Третий слой — индексирование внешней документации. В Cursor Settings → Features → Docs → @Docs → Add new doc вы даёте URL (например, react.dev или доки вашей UI-библиотеки), Cursor краулит и индексирует страницу под алиасом, и дальше вы упоминаете её в промпте через @. Это удобно, когда нужна не документация Next.js (её закрывает AGENTS.md), а сторонняя библиотека, которой в обучающих данных модели могло не быть вовсе.

Практический воркфлоу: от компонента до отладки

Соберём слои в реальную последовательность работы.

1. Генерация компонента. С правилом «по умолчанию серверные компоненты» просите агент создать, скажем, карточку товара. Он сделает серверный компонент и добавит 'use client' только там, где нужна интерактивность (обработчики, useState). Без правила он часто вешает 'use client' на всё подряд — и вы теряете серверный рендеринг.

2. Рефакторинг. Когда переписываете существующий кусок, держите правила включёнными и давайте агенту опорные файлы через @. Для крупных изменений разумно дробить задачу: одному правилу на десяток тем сложнее «дотянуться» до каждой, поэтому точечный контекст работает лучше «мегапромпта».

3. Отладка. Здесь Next.js 16.3 добавил то, чего почти нет у других фреймворков: agent-browser (версия 0.27+) даёт агенту не просто DOM, консоль и сеть, а интроспекцию React — команды вроде react tree (дерево компонентов) и react inspect (разбор одного компонента). Плюс DevTools MCP-сервер с инструментами по роутингу, кэшированию и рендерингу, а в 16.3 к нему добавили get_compilation_issues и compile_route. То есть агент может сам «посмотреть», что реально отрендерилось, а не гадать по коду.

Типовые галлюцинации Cursor на Next.js и как их лечить

Собранные из разборов конкретные грабли и фиксы:

СимптомПричинаФикс
В App Router-проекте появляется getServerSidePropsперекос данных в сторону Pages Routerправило «только App Router», плюс AGENTS.md
params.id без await → рантайм-ошибкасинхронный доступ убран в Next.js 16правило «params/cookies() только через await»
Данные на странице не обновляются после действияпропущен revalidatePath()/revalidateTag()явное правило на ревалидацию после мутаций
Tailwind-настройки лезут в tailwind.config.jsмодель обучена на v3правило «Tailwind v4 через @theme в CSS»
'use client' навешан везденет правила про серверные компоненты по умолчаниюправило «по умолчанию Server Component»

Логика везде одна: симптом лечится не «уговорами» в чате, а строчкой в правилах — она попадает в контекст на каждый запрос.

Слабые места настройки Cursor: .cursorrules помечен deprecated

Честно про то, где подход даёт трещину:

  • .cursorrules — легаси. По данным независимых обзоров правил Cursor, формат помечен deprecated ещё с версии 0.43. Новые проекты сразу заводите на .cursor/rules/*.mdc, иначе часть возможностей (например, привязка правил к конкретным файлам) недоступна.
  • Дрейф в прошлое без явной версии. Без указания версий стека агент статистически чаще выдаёт устаревшие паттерны — это свойство обучающих данных, оно никуда не денется, только компенсируется контекстом.
  • Пропуск revalidatePath() — распространённая ошибка, которую легко не заметить: код собирается, но данные «залипают».
  • Tailwind v4 генерируется в синтаксисе v3 по умолчанию — без правила придётся править руками.
  • Версии стека быстро меняются. Next.js и React обновляются часто; правила и подключённые доки надо периодически пересматривать, иначе они сами становятся источником устаревания.

Баланс тут не в пользу пессимизма: сам Next.js двинулся навстречу — AGENTS.md с автоподдержкой актуальности (с 16.3) и публичный бенчмарк evals снимают значительную часть проблемы. Но снимают её именно те, кто эти механизмы включил.

Если сам подход «описываю задачу словами — получаю рабочий код» для вас пока в новинку, полезно сначала разобраться с идеей вайб-кодинга без глубокого программирования — тогда фронтенд-специфика ляжет на понятную базу.

Частые вопросы

.cursorrules ещё работает или уже нет смысла? Работает по обратной совместимости, но это легаси с версии 0.43. Для новых проектов используйте .cursor/rules/*.mdc — там все актуальные возможности и надёжнее подхват.

Нужен ли AGENTS.md, если у меня уже есть правила? Да, это разные слои. Правила описывают ваши конвенции, а AGENTS.md подключает версионно-точную документацию самого Next.js. Вместе они бьют по устареванию сильнее, чем по отдельности.

Почему Cursor пишет getServerSideProps в проекте на App Router? Из-за перекоса обучающих данных: старого кода в интернете больше. Лечится правилом «только App Router» и подключением AGENTS.md.

Cursor подходит только для фронтенда? Нет, но у фронтенда на Next.js/React есть своя специфика (App Router, серверные компоненты, Tailwind v4), под которую правила стоит писать отдельно — этим и отличается прикладная настройка от общей.

Какую версию Next.js считать актуальной для правил? На середину 2026 — линейку 16 (стабильно 16.2, preview 16.3), React 19.2. Именно от них стоит отталкивать агента; проверяйте перед стартом проекта, версии волатильны.

С чего начать прямо сейчас

Минимальный набор, который окупается в первый же день: заведите .cursor/rules/nextjs.mdc с запретом Pages Router, await на динамические API и правилом ревалидации; добавьте AGENTS.md (в свежем Next.js он ставится автоматически); подключите через @Docs доки библиотек, которых нет в стандартном стеке. Дальше — итерациями дописывайте правила под то, где агент ошибается именно у вас.

Отдельно стоит держать в голове порядок приоритетов: сначала правила и AGENTS.md (они дают агенту актуальную картину стека), затем режимы отладки (agent-browser, DevTools MCP) — они помогают ловить то, что всё-таки просочилось. Такой порядок экономит время: чем меньше устаревшего кода агент сгенерирует на входе, тем меньше придётся вычищать на выходе. И держите один принцип: правила — это не «настроил и забыл», а живой файл, который вы правите каждый раз, когда ловите новую характерную ошибку.

Прочувствовать разницу «с правилами и без» проще всего на живом проекте — бесплатного тарифа для этого хватает, а платные модели имеет смысл подключать уже под конкретную нагрузку, когда поймёте, где именно упираетесь. Если хотите сперва оценить редактор целиком — его сильные и слабые стороны собраны в обзоре возможностей и цен Cursor.

BYBIT COPY TRADING
Копируй профи
Bybit повторит сделки трейдера за тебя
Начать
Поделиться
Связаться:
Крипто- и data-аналитик, инженер-программист (факультет компьютерных наук ХНУРЭ). В IT с 2008 года: администрировал корпоративный мониторинг в «Vodafone Украина», семь лет разрабатывал и продвигал веб-проекты, пять лет руководил маркетингом на метриках — конверсия, CTR, ROI, LTV.Криптовалютными рынками занимаюсь с 2021 года: ончейн-метрики, токеномика, макроэкономические индикаторы. Разработал собственную data-driven модель анализа рынка на 30+ метрик. Стек — Python (pandas, NumPy, SciPy, matplotlib), математическая статистика и EDA; сбор и сверку данных автоматизирую AI-агентами.Принцип — «Don't trust, verify»: каждая цифра проверена по первоисточнику, ключевые — минимум по двум независимым; прогнозы — только сценарии с условиями. Тезис без данных не публикуется.