/audit

Next.js Audit

Scan a Next.js project for common issues, anti-patterns, and misconfigurations.

Load the nextjs-expert skill for App Router patterns and security best practices.

Usage

/audit [--focus routing|components|performance|all]

Arguments

Parse $ARGUMENTS to extract:

• --focus (optional, default: all)
  • routing — Route structure, missing error/loading boundaries, middleware issues
  • components — Client/server component misuse, missing use client, prop drilling
  • performance — Bundle size, unoptimized images, unnecessary client-side JS
  • all — Run everything

Instructions

1. Detect Next.js Version & Router

cat package.json | grep -E '"next"'
ls app/ 2>/dev/null && echo "App Router"
ls pages/ 2>/dev/null && echo "Pages Router"
ls next.config.* 2>/dev/null

2. Routing Audit

App Router:

• Search for missing error.tsx boundaries in route segments
• Search for missing loading.tsx where data fetching occurs
• Check for missing not-found.tsx at the root
• Verify layout.tsx exists at the root
• Check for route groups (group) organization
• Look for parallel routes and intercepting routes usage
• Verify generateStaticParams is used for dynamic routes that could be static
• Check middleware.ts for correctness (matcher patterns, edge runtime compatibility)

Pages Router:

• Check for _app.tsx, _document.tsx, _error.tsx
• Look for getStaticProps vs getServerSideProps usage (prefer static when possible)
• Check for missing getStaticPaths on dynamic routes

3. Component Audit

Search for:

• Missing 'use client' — Components using hooks (useState, useEffect, useRef) without the directive
• Unnecessary 'use client' — Components marked client that don't need to be (no hooks, no browser APIs)
• Server component data fetching — fetch() calls in server components without proper caching directives
• Large client components — Components with 'use client' that import heavy libraries (could split)
• Prop drilling — Deep prop passing that should use server components or context
• Missing Suspense boundaries — Async server components without Suspense wrappers
• Direct DOM manipulation — document. or window. without proper guards

4. Performance Audit

Check for:

• Unoptimized images — <img> tags instead of next/image
• Missing next/font — Google Fonts loaded via <link> instead of next/font
• Large dependencies in client components — Import analysis for heavy libs (moment, lodash full, etc.)
• Missing dynamic imports — Heavy components that should use next/dynamic
• No ISR/revalidation — Pages that fetch data but never revalidate
• Unnecessary API routes — Server components can fetch directly without an API layer
• Missing metadata — Pages without generateMetadata or metadata export
• next.config.js issues — Missing output: 'standalone' for Docker, missing image domains

5. Security Check

• API routes without authentication middleware
• Missing CSRF protection on mutations
• Exposed environment variables (non-NEXT_PUBLIC_ vars leaking to client)
• Missing Content-Security-Policy in middleware or headers config

6. Generate Report

## Next.js Audit Report

### Project
| Field | Value |
|-------|-------|
| Next.js Version | X.X.X |
| Router | App Router / Pages Router |
| TypeScript | Yes/No |

### Summary
| Category | Issues | Critical | Warning | Info |
|----------|--------|----------|---------|------|
| Routing | X | X | X | X |
| Components | X | X | X | X |
| Performance | X | X | X | X |
| Security | X | X | X | X |

### Critical Issues
[List with file paths and specific fixes]

### Warnings
[List with recommendations]

### Quick Wins
[Easy fixes that improve quality immediately]