# next-js

Задаёт стандарты разработки на Next.js в Cursor: изолирует фичи в папке app, держит компоненты серверными и запрещает теги img.

- правило · `type=rule` · Cursor · ★ 3580
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/next-js.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/next-js

## Что делает

Правило настраивает Cursor под стек Next.js с каталогом `app/`. Файлы мапятся по маске `**/*.{js,jsx,ts,tsx}`. Инструкции требуют группировать код по фичам, а не разносить компоненты и хуки по общим верхнеуровневым папкам. Для общих модулей зафиксированы директории `components/`, `lib/`, `hooks/`, `types/` и `public/`.

Главный акцент сделан на Server Components по умолчанию. Директиву `'use client'` модель должна опускать как можно ниже по дереву, изолируя только интерактивные кнопки или формы. Выборка данных идёт напрямую в серверных компонентах через параллельный `Promise.all`, а мутации выносятся в Route Handlers `route.ts`. Если в коде появится обычный тег `<img>`, Cursor сочтёт это ошибкой и заменит его на `next/image`.

Для интерфейса правило предписывает стриминг через `loading.tsx` и `Suspense`, а для шрифтов — модуль `next/font`. Правило жёстко завязано на архитектуру `app/`: если проект ещё использует Pages Router, эти шаблоны сломают генерацию страниц.

## Установка

### Cursor (родная платформа)

**Вручную: положить файлы**
- Файл: `.cursor/rules/next-js.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/next-js.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/next-js.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/next-js.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/next-js.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/next-js.mdc

## Когда брать
- разложить компоненты, хуки и страницы по папкам фич внутри `app/`
- перенести выборку данных в серверные компоненты без утечки логики на клиент
- изолировать клиентское состояние на нижних уровнях через `'use client'`
- заменить нативные теги `<img>` на оптимизированный `next/image`

## Примеры запросов агенту
- Создай страницу корзины в `app/cart` с серверной загрузкой данных и клиентской кнопкой оплаты
- Отрефактори карточку товара: вынеси интерактивную часть в отдельный клиентский компонент
- Добавь эндпоинт в `app/api/cart/route.ts` для обработки мутаций корзины

## Похожие
- [react-expert](https://affpapa.org/nevibecode/skills/react-expert.md) — скилл · 5500 установок
- [nextjs-architecture-expert](https://affpapa.org/nevibecode/agents/nextjs-architecture-expert.md) — субагент · 4935 установок
- [react-patterns](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-react-patterns.md) — скилл · 4800 установок
- [nextjs-server-navigation](https://affpapa.org/nevibecode/skills/nextjs-server-navigation.md) — скилл · 303 установки
- [cloudinary-next](https://affpapa.org/nevibecode/skills/cloudinary-next.md) — скилл · 307 установок
- [next-cache-components](https://affpapa.org/nevibecode/skills/next-cache-components.md) — скилл · 4 установки

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 240 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md