Попросіть Cursor «зробити сторінку профілю на Next.js» — і з високою ймовірністю він видасть робочий на вигляд код, який на актуальному проєкті просто не збереться. Усередині виявиться getServerSideProps, синхронний доступ до params, конфіг Tailwind через tailwind.config.js — патерни, яких у свіжому Next.js уже немає. Причина не в тому, що «Cursor поганий»: причина в тому, що ми не дали йому знати, на якій версії стека працюємо.
- Актуальний стек на середину 2026 року
- Чому Cursor за замовчуванням пише код 2023 року
- Три способи дати Cursor актуальний контекст
- Практичний воркфлоу: від компонента до відлагодження
- Типові галюцинації Cursor на Next.js і як їх лікувати
- Слабкі місця налаштування Cursor: .cursorrules deprecated
- Поширені запитання
- З чого почати просто зараз
Це ключова думка всієї статті. Cursor для веброзробки — дуже сильний інструмент: є навіть розробники, які самотужки зібрали на ньому пару продакшен-застосунків на Next.js і вийшли на виторг (кейс із Hacker News на кілька тисяч доларів). Але між «потужний інструмент» і «пише актуальний код» стоїть одна річ — контекст. Нижче розберемо, як цей контекст дати: які версії вважати актуальними, чому ШІ дрейфує до старого синтаксису і як трьома різними способами змусити агента писати по-сучасному.
Усе, що описано нижче, відпрацьовується на безкоштовному тарифі — поставити Cursor і спробувати на своєму Next.js-проєкті варто одразу: різниця «з правилами і без» помітна першого ж дня.
Актуальний стек на середину 2026 року
Перш ніж налаштовувати правила, зафіксуймо, що взагалі вважається «сучасним» — інакше незрозуміло, від чого відштовхувати агента. Усі версії волатильні, тому даю їх із датами.
| Компонент | Актуальна версія | Що важливо для ШІ-кодингу |
|---|---|---|
| Next.js | 16 (вийшов 21 жовтня 2025), стабільна лінійка 16.2, preview 16.3 | App Router — основний шлях, Pages Router переведено в режим підтримки |
| Бандлер | Turbopack — за замовчуванням із Next.js 16 | у 2–5× швидша продакшен-збірка, до 10× швидший Fast Refresh |
| React | 19.2 (1 жовтня 2025) | App Router у Next.js 16 працює на React Canary з фічами 19.2 |
| Tailwind CSS | v4 (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 із фронтматтером. Кожне правило має один із чотирьох режимів застосування:
- 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.mdparams.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.
