nextjs-app-router-auditlisted

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.
datagrove-nl/nextjs-app-router-audit · ★ 0 · Web & Frontend · score 72

Install: claude install-skill datagrove-nl/nextjs-app-router-audit

# 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: ```bash 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: | Rule | Severity | Why it matters | |------|----------|----------------| | `client-route-no-metadata` | ERROR | A `"use client"` page/layout silently drops `metadata` — SEO tags never ship. | | `legacy-next-head` | ERROR | `next/head` is a no-op in the App Router — its tags never reach `<head>`. | | `legacy-next-image` | WARN | `next/legacy/image` keeps old layout-shift-prone behavior. | | `needless-use-client` | WARN | `"use client"` with no hooks/handlers/browser APIs — pushes JS to the client for nothing. | | `client-fetch-in-effect` | WARN | Fetching in `useEffect` adds a render round-trip; move it server-side. | | `raw-