← Back to Skills Marketplace
sioncoolwijk

Nextjs App Router Audit

by Sion Coolwijk · GitHub ↗ · v1.0.1 · MIT-0
cross-platform ✓ Security Clean
42
Downloads
0
Stars
0
Active Installs
2
Versions
Install in OpenClaw
/install 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...
README (SKILL.md)

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:

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 \x3Chead>.
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-img WARN \x3Cimg> skips next/image sizing/lazy-loading — CLS & LCP regressions.
unoptimized-font WARN Fonts via \x3Clink>/@import are render-blocking; use next/font.
page-missing-metadata WARN Async page exports no metadata/generateMetadata.
dangerous-html WARN dangerouslySetInnerHTML — XSS risk if unsanitized.
request-waterfall INFO ≥2 sequential awaited fetches, no Promise.all.
no-streaming-fallback INFO Async page with no loading.tsx/Suspense — no streamed shell.
force-dynamic INFO Route opts out of static/ISR rendering — confirm it's intentional.
large-client-component INFO Big Client Component ships entirely to the browser.

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.

Usage Guidance
This skill is reasonable to install if you want a local Next.js App Router audit. Expect it to read source files in the target app directory and produce findings that should be manually verified; only allow code edits when you explicitly ask the agent to apply fixes.
Capability Tags
requires-sensitive-credentials
Capability Assessment
Purpose & Capability
The stated purpose is to audit Next.js App Router projects, and the artifacts provide a matching local static scanner plus review checklist for RSC, metadata, caching, streaming, and Core Web Vitals issues.
Instruction Scope
Instructions are user-directed and scoped to running `node scripts/audit.mjs` against a project or app directory, then manually verifying findings before reporting or fixing them.
Install Mechanism
Installation is ordinary skill placement/upload; there are no install hooks, package-manager steps, auto-run workflows, or dependency downloads in the artifact.
Credentials
The scanner recursively reads local JavaScript/TypeScript files under `app/` or `src/app/`, which is expected for a code audit; it skips common build and VCS directories and does not perform network calls.
Persistence & Privilege
No background workers, persistence mechanisms, privilege escalation, credential use, file writes, deletes, or external exfiltration behavior were found.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install nextjs-app-router-audit
  3. After installation, invoke the skill by name or use /nextjs-app-router-audit
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.1
- Added .gitignore and LICENSE files for better project management and licensing clarity. - Removed the CI workflow file (.github/workflows/audit.yml).
v1.0.0
Initial release of nextjs-app-router-audit. - Provides a zero-dependency static scanner to detect correctness and performance issues in Next.js App Router codebases. - Identifies server/client boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks. - Offers a clear manual review methodology for areas not fully covered by static analysis. - Generates a human-readable or machine-readable report, with severity-ranked findings and concrete fixes. - Designed for integration with CI/CD pipelines through exit codes and JSON output.
Metadata
Slug nextjs-app-router-audit
Version 1.0.1
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 2
Frequently Asked Questions

What is Nextjs App Router Audit?

Audit a Next.js App Router codebase for React Server Component boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks... It is an AI Agent Skill for Claude Code / OpenClaw, with 42 downloads so far.

How do I install Nextjs App Router Audit?

Run "/install nextjs-app-router-audit" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Nextjs App Router Audit free?

Yes, Nextjs App Router Audit is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Nextjs App Router Audit support?

Nextjs App Router Audit is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Nextjs App Router Audit?

It is built and maintained by Sion Coolwijk (@sioncoolwijk); the current version is v1.0.1.

💬 Comments