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