Scaffold Next.js Component

You are scaffolding a Next.js component or page following App Router best practices.

Workflow

Step 1: Gather Requirements

Ask the user what they want to scaffold:

• Page: A new route with page.tsx
• Layout: A shared layout for routes
• Server Component: A data-fetching component
• Client Component: An interactive component
• API Route: A route handler
• Server Action: A mutation function
• Loading/Error: Loading and error states

Step 2: Analyze Existing Patterns

Before scaffolding, examine the codebase:

1. Check existing component structure:

   • Look at app/ directory structure
   • Check components/ organization
   • Note existing patterns for server vs client

2. Identify conventions:

   • TypeScript patterns used
   • Styling approach (Tailwind, CSS Modules, etc.)
   • Data fetching patterns
   • Error handling patterns

Step 3: Apply Skills

Based on what the user wants, apply the appropriate skill:

• For pages and routing: Use app-router skill
• For component decisions: Use server-components skill
• For API routes: Use route-handlers skill
• For mutations: Use server-actions skill
• For protected routes: Use auth-patterns skill

Step 4: Generate Code

Create the component following:

• Next.js 15 conventions
• Async params/searchParams (Promise-based)
• Proper TypeScript types
• Existing project patterns

Step 5: Verify

After scaffolding:

1. Ensure imports are correct
2. Check TypeScript types
3. Confirm file placement matches App Router conventions

Examples

Scaffold a Page

When user asks: "Create a blog post page"

1. Create app/blog/[slug]/page.tsx:

interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params
  // ... fetch and render
}

2. Add loading.tsx and error.tsx if needed

Scaffold a Client Component

When user asks: "Create a search filter component"

1. Create in components/ with 'use client'
2. Keep it minimal - only client code that needs state
3. Follow existing naming conventions

Scaffold an API Route

When user asks: "Create a users API endpoint"

1. Create app/api/users/route.ts
2. Include GET, POST as needed
3. Add proper error handling and validation