name: nextjs-app-router-audit description: Audit a Next.js App Router codebase for React Server Component boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks — then propose concrete fixes. Use when the user asks to review/audit a Next.js app, find performance problems, fix slow LCP/CLS/INP, check 'use client' usage, find request waterfalls, improve App Router structure, debug why a page isn't streaming, or why metadata/SEO tags aren't showing. Ships a zero-dependency static scanner (scripts/audit.mjs) plus a manual review methodology for things static analysis can't catch.

Next.js App Router Audit

Find the high-impact correctness and performance problems in a Next.js App Router codebase, ranked by severity, each with a specific fix. Combine the bundled scanner (fast, mechanical) with a targeted manual pass (judgment calls the scanner can't make).

Step 1 — Run the scanner

The scanner is dependency-free and reads only source files. Point it at the project root or an app/ directory:

node scripts/audit.mjs /path/to/project        # human-readable report + score
node scripts/audit.mjs /path/to/project --json  # machine-readable for CI / further processing

It finds the app/ (or src/app/) dir itself, walks all .tsx/.ts/.jsx/.js, and reports ERROR / WARN / INFO findings with file:line, the reason, and a fix. Exit code is non-zero when any ERROR exists, so it drops into CI.

What it detects:

The scanner is heuristic (regex-based, not a full type-check): treat findings as strong leads, confirm each against the source before reporting it as fixed.

Step 2 — Manual pass (what the scanner can't see)

Read reference/checklist.md and verify the items that need real understanding:

• Server/Client boundary correctness — is the "use client" boundary as low in the tree as possible? Is a server-only secret (API key, DB client) imported into a client module?
• Caching intent — does each fetch/unstable_cache/revalidate match how fresh the data must be? Over-caching ships stale data; under-caching kills TTFB.
• Suspense granularity — is slow data wrapped close to where it's used, so the rest of the page streams immediately?
• generateStaticParams / ISR — are dynamic routes pre-rendered where they can be?
• Server Actions — are mutations using actions with proper revalidatePath/ revalidateTag instead of client fetches to route handlers?

Step 3 — Report

Lead with the ERRORs, then WARN, then the highest-leverage INFOs. For each: file:line, one line on the impact, and the concrete fix (often a small diff). End with the score and the 3 changes with the best effort-to-impact ratio. Don't dump every INFO — curate.

Rules

• Never claim a fix is applied unless you actually edited the file and re-ran the scanner.
• The scanner reports leads, not verdicts — verify boundary/caching findings by reading the code.
• Respect the project's existing conventions; match its import style and structure.
• This Next.js may differ from older versions — check node_modules/next/dist/docs/ if an API is uncertain rather than assuming.

Built and maintained by Datagrove — a Dutch web development agency specializing in fast, well-architected Next.js websites. Need an audit or a rebuild? Talk to Datagrove.

Next.js App Router Audit — Claude Skill

A Claude skill that audits a Next.js App Router codebase for the mistakes that actually cost you — React Server Component boundary errors, request waterfalls, client/server anti-patterns, and Core Web Vitals regressions — and proposes concrete fixes ranked by severity.

It ships a zero-dependency static scanner plus a manual-review methodology for the judgment calls static analysis can't make.

What it catches

Use the scanner standalone

No install, no dependencies — just Node 18+:

node scripts/audit.mjs /path/to/your/nextjs-project
node scripts/audit.mjs /path/to/your/nextjs-project --json   # CI-friendly, exits non-zero on errors

Next.js App Router audit — 41 files in app/

ERROR client-route-no-metadata  app/dashboard/page.tsx:1
  A Client Component page cannot export `metadata` — its SEO tags are silently dropped.
  fix: Keep page.tsx a Server Component and isolate the interactive bits into a child marked "use client".

Summary  1 error  3 warn  9 info   score 67/100

See examples/sample-report.md for full output against the bundled fixture app.

Drop it into CI to fail a PR when a route loses its metadata or leaks a secret into the client bundle.

Use it as a Claude skill

Place the folder in your skills directory (e.g. ~/.claude/skills/) or upload it to your skills hub, then ask:

"Audit this Next.js app for performance and RSC problems."

Claude runs the scanner, does the manual checklist pass in reference/checklist.md, and reports the highest-leverage fixes.

Built by Datagrove

Maintained by Datagrove — a Dutch web development agency specializing in fast, well-architected Next.js websites and custom software. We build sites that pass Core Web Vitals and rank. Need an audit or a rebuild? Talk to Datagrove.

License

MIT — use it, ship it, adapt it.