# nextjs-component-generator

Команда создаёт компоненты Next.js на TypeScript с учётом структуры проекта. Задайте имя и тип: клиентский, серверный, страница или макет.

- команда · `type=command` · Claude Code · 935 установок
- Автор: davila7
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/nextjs-vercel/nextjs-component-generator.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/commands/nextjs-component-generator

## Что делает

Команда читает настройки Next.js, TypeScript и Tailwind, а также изучает каталоги компонентов, страниц и стилей. По этому контексту она выбирает тип компонента: `--client`, `--server`, `--page` или `--layout`; для интерактивных компонентов без флага выбирается клиентский вариант, а для Next.js 13+ по умолчанию — серверный.

В структуру могут войти TSX-файл компонента, CSS-модуль, типы, тест и экспорт через `index.ts`; Storybook-история создаётся, если Storybook обнаружен. Шаблоны также охватывают страницы с метаданными и общие макеты. Команда использует `Read`, `Write` и `Edit`, поэтому её работа зависит от файлов проекта, которые она может прочитать и изменить.

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

## Установка

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

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --command nextjs-vercel/nextjs-component-generator
```

2. **Вручную: положить файлы**
- Файл: `.claude/commands/nextjs-component-generator.md` — Вызов — /nextjs-component-generator. Для всех проектов — ~/.claude/commands/

### Codex

**Вручную: положить файлы**
- Файл: `~/.codex/prompts/nextjs-component-generator.md` — Вызов — /prompts:nextjs-component-generator. В Codex этот формат помечен устаревшим, замена — скиллы

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/prompts/nextjs-component-generator.prompt.md`

### Gemini CLI

**Вручную: положить файлы**
- Файл: `.gemini/commands/nextjs-component-generator.toml` — Gemini хранит команды в TOML: текст запроса — в поле prompt

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/nextjs-vercel/nextjs-component-generator.md

## Когда брать
- создать клиентский или серверный компонент Next.js
- добавить страницу с метаданными
- собрать общий макет с заголовком и областями страницы
- подготовить CSS-модуль и типы для компонента
- добавить тест и экспорт компонента

## Примеры запросов агенту
- Создай серверный компонент `ProductCard` для этого проекта.
- Сгенерируй интерактивный `ThemeToggle` с флагом `--client`.
- Подготовь страницу `Settings` с флагом `--page`.

## Похожие
- [design-review](https://affpapa.org/nevibecode/commands/design-review.md) — команда · ★ 41729
- [typescript-scaffold](https://affpapa.org/nevibecode/commands/typescript-scaffold.md) — команда · ★ 41729
- [full-stack-feature](https://affpapa.org/nevibecode/commands/full-stack-feature.md) — команда · ★ 41729

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 238 карточек

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

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