Cursor Rules для React и Next.js: готовый next.mdc
Сервер и клиент, загрузка данных, формы и секреты — правила под твой роутер
Какую задачу решает
Избежать типовых ошибок агента в компонентах React и Next.js
Что будет на выходе
Правила Cursor для React и Next.js
- Кому подойдёт
Вайбкодер в Cursor, которому нужны правила агента для темы «React / Next.js»
- Тема
- Агенты и Claude Code
- Инструменты
- Cursor
С Next.js агент чаще всего ошибается на одной границе: что выполняется на сервере, а что в браузере. Он ставит 'use client' на всю страницу из-за одной кнопки, тянет данные через useEffect, хотя страница могла получить их на сервере, а ключ API кладёт в переменную с префиксом NEXT_PUBLIC_ — и тот уезжает в браузер каждому посетителю.
Файл next.mdc фиксирует, как в твоём проекте устроены серверные и клиентские компоненты, где загружаются данные, как работают формы и какие типы обязательны. Агент читает его, когда трогает страницы и компоненты.
Указываешь версию Next.js, роутер и пару своих страниц. Промпт собирает next.mdc с правилами про server и client компоненты, загрузку данных, формы и переменные окружения. Агент перестаёт делать всю страницу клиентской.
Что внутри правила
- Граница server/client. По умолчанию компонент серверный.
'use client'— только на маленьком интерактивном куске: кнопке, форме, переключателе. - Загрузка данных. Где получать данные в твоём роутере и чего не делать: запросов к своему же API из серверного компонента,
useEffectдля первичной загрузки. - Мутации и формы. Server Actions или роуты API — как принято в проекте, с проверкой данных на сервере.
- Переменные окружения. Секреты без
NEXT_PUBLIC_, в клиентском коде — только публичные значения. - Типизация. Типы пропсов, ответа API и параметров страницы, без
any.
Как использовать
- 1Определи роутер и версию
Открой package.json и посмотри версию next. Есть папка app/ — это App Router, есть pages/ — Pages Router. Бывает и то и другое, тогда укажи оба.
- 2Собери образцы
Одна страница с загрузкой данных, один интерактивный компонент и файл, где лежат запросы к базе или API.
- 3Запусти промпт и сохрани файл
Ответ целиком — в .cursor/rules/next.mdc вместе с шапкой.
- 4Проверь на задаче с формой
Попроси агента добавить форму, например «оставить отзыв о заказе». Смотри, где стоит 'use client', где проверяются данные и не утекли ли секреты.
Переменная с этим префиксом попадает в код, который скачивает браузер. Ключи платёжки, базы и ИИ-сервисов держи без префикса и используй только на сервере.
Рядом по теме: Cursor Rules для Vue 3: готовый vue.mdc, Cursor Rules для тестов: готовый tests.mdc, Cursor Rules для Laravel: готовый laravel.mdc, статья «Где разместить проект» и VIBERZ Product Brain — единый контекст для AI-скиллов (бесплатно после регистрации).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
Секреты и проверку ввода подробнее закрывает security.mdc, а прежде чем выкладывать проект, прогони гайд «Найди ключи и пароли до того, как их найдут другие». Если хочешь пройти весь путь от задачи до работающего веб-приложения с агентом, посмотри Telegram Mini App с AI-кодером. Когда всё готово к запуску, пригодится «Выложить проект в интернет без сюрпризов».
