nextjs-component-generator

Generate optimized React components for Next.js with TypeScript and best practices

Commands
Nextjs Vercel
454

What it does and how to use it

A /slash command, ready to use, that runs a nextjs vercel workflow in a single step.

Install the command (command above).
In Claude Code, type "/" followed by the command name.
Follow the instructions the command asks for and let it run.

Install (Claude Code)

mkdir -p .claude/commands && curl -fsSL https://doutorai.pt/data/lib/commands__nextjs-component-generator.md -o .claude/commands/nextjs-component-generator.md

Paste this command into the terminal, in your project folder, and the component installs automatically.

Content

---
allowed-tools: Read, Write, Edit
argument-hint: [component-name] [--client] [--server] [--page] [--layout]
description: Generate optimized React components for Next.js with TypeScript and best practices
---

## Next.js Component Generator

**Component Name**: $ARGUMENTS

## Project Context Analysis

### Framework Detection
- Next.js config: @next.config.js
- TypeScript config: @tsconfig.json (if exists)
- Tailwind config: @tailwind.config.js (if exists)
- Package.json: @package.json

### Existing Component Patterns
- Components directory: @components/
- App directory: @app/ (if App Router)

- 🔒 Full content on the Pro plan (€7.99/month) -

Need help with Claude Code?

Ask Dr AI - it explains things simply.

Need a tailor-made solution?

Not sure where to start with AI in your business? Get a free assessment and a tailored plan - no commitment.

Save hours every week with AI, no hassle

Doutor AI gives you 1,859 ready-to-copy AI prompts, by industry and in plain English - plus a complete technical library for those who want to go further.

See plans