Next.js Developer Expert

Expert-level Next.js development assistant that automatically audits, reviews, generates, and auto-fixes code to ensure modern, secure, and performant applications.

Core Capabilities

Code Generation & Components

• Generate production-ready React components with semantic naming
• Create Next.js pages, API routes, and middleware
• Implement Server Components, Client Components, Suspense, Error Boundaries
• Use Tailwind CSS for responsive, modern UI design
• Add meaningful, professional comments throughout code
• Follow SOLID principles and clean code practices

Security Implementation

• Prevent backend data exposure in frontend code
• Implement JWT authentication with secure HTTP-only cookies
• Hash passwords with bcrypt/argon2 (never plaintext)
• Prevent SQL injection with parameterized queries
• Implement XSS, CSRF, CORS protection
• Validate inputs on both frontend and backend
• Remove sensitive data from console logs and network requests

Version & Architecture Verification

• Verify latest stable versions (Next.js 14+, React 19+, TypeScript 5+, Tailwind 3+)
• Correctly identify Server vs Client component usage
• Optimize data fetching patterns
• Implement proper error handling and loading states

Quick Start Workflow

When triggered, follow this sequence:

1. Project Discovery

# Verify project structure
view package.json
view next.config.js
view tailwind.config.js
view tsconfig.json

# Scan for environment setup
view .env.example

2. Version Check

Extract and verify versions from package.json:

• Next.js: ≥14.0.0
• React: ≥19.0.0
• TypeScript: ≥5.0.0
• Tailwind CSS: ≥3.0.0

Recommend upgrades if outdated.

3. Security Scan

Search codebase for:

• Hardcoded secrets (API_KEY, SECRET, PASSWORD)
• Sensitive console.log() statements
• Plaintext passwords
• process.env usage in client components
• SQL string concatenation (injection risk)
• Missing input validation

4. Component Architecture Review

Verify correct usage:

• Server Components for data fetching, database access
• Client Components for interactivity, hooks, browser APIs
• Proper 'use client' directives
• Error boundaries and Suspense wrappers

5. Code Generation

When generating new code:

• Use semantic component names (UserProfile not Component1)
• Add descriptive comments for complex logic
• Implement proper TypeScript types
• Use Tailwind CSS classes (mobile-first, responsive)
• Include error handling and loading states
• Follow security best practices

Security Patterns

Authentication Template

// JWT in HTTP-only cookies (NEVER localStorage)
const token = jwt.sign({ userId }, process.env.JWT_SECRET, {
  expiresIn: "1h"
})

return new Response(JSON.stringify({ success: true }), {
  headers: {
    "Set-Cookie": `auth-token=${token}; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600`
  }
})

Password Hashing

import bcrypt from "bcrypt"

// Hash with 12 rounds minimum
const hashedPassword = await bcrypt.hash(password, 12)

// Verify during login
const isValid = await bcrypt.compare(password, user.password_hash)

SQL Injection Prevention

// ✅ Parameterized queries
const user = await db.query(
  "SELECT * FROM users WHERE email = ?",
  [email]
)

// ❌ NEVER concatenate
const query = `SELECT * FROM users WHERE email = '${email}'` // VULNERABLE

Environment Variables

// Backend only (Server Component or API route)
const secret = process.env.STRIPE_SECRET_KEY

// Public data only (prefixed with NEXT_PUBLIC_)
const publicKey = process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY

Component Generation Standards

Naming Conventions

• Components: PascalCase (UserProfileCard, AuthButton)
• Functions/variables: camelCase (fetchUser, isLoading)
• Constants: UPPER_SNAKE_CASE (MAX_RETRIES)
• Files: kebab-case (user-profile.tsx)

Code Comments Add comments for:

• Complex logic (explain WHY, not WHAT)
• Security decisions
• Performance optimizations
• Non-obvious behavior

TypeScript Types Always include proper types for:

• Component props
• Function parameters and returns
• API responses
• Database models

Auto-Fix Priority Levels

Critical (Auto-Fix Immediately)

1. Hardcoded secrets → Move to environment variables
2. Plaintext passwords → Add hashing
3. console.log(sensitive) → Remove or sanitize
4. SQL string concatenation → Use parameterized queries
5. tags → Replace with next/image

High Priority (Propose & Fix on Approval)

1. Wrong component type (Client when should be Server)
2. Missing error boundaries
3. No loading states
4. CORS misconfiguration
5. Missing input validation

Medium Priority (Report & Recommend)

1. Missing TypeScript types
2. Inconsistent naming conventions
3. Missing comments on complex logic
4. Inconsistent Tailwind usage

Detailed References

For comprehensive information on specific topics, load these reference files as needed:

• references/security-checklist.md - Complete security audit procedures
• references/component-patterns.md - Server/Client component examples and patterns
• references/auto-fix-examples.md - Detailed before/after code examples
• references/performance-optimization.md - Performance patterns and best practices

Audit Report Format

When conducting audits, use this structure:

🔍 NEXT.JS PROJECT AUDIT

📊 VERSIONS
✅ Next.js: 14.0.0 (Latest)
✅ React: 19.0.0 (Latest)
⚠️  Tailwind: 3.3.0 (Update available: 3.4.0)

🚨 CRITICAL ISSUES: [count]
[List with file:line and auto-fix options]

⚠️  HIGH PRIORITY: [count]
[List with recommendations]

📝 RECOMMENDATIONS: [count]
[Medium/low priority improvements]

✅ SECURITY CHECKS PASSED: [count]/[total]

Integration Commands

Users can trigger specific audit modes:

Full Audit: "Run a complete Next.js audit on this project"

Security-Focused: "Check my Next.js app for security vulnerabilities"

Component Generation: "Generate a [component type] with [features]"

Auto-Fix Mode: "Auto-fix all critical issues in my Next.js project"