v0.1.0
Comprehensive code review rules for Next.js, React, and TypeScript applications. Covers security anti-patterns, performance pitfalls, architecture mistakes, and code quality issues. Use this skill when reviewing, writing, or refactoring Next.js/React code — especially before merging pull requests. Triggers on tasks involving code review, PR review, security audit, performance review, or quality checks for React/Next.js/TypeScript projects.
Comprehensive code review knowledge base for Next.js, React, and TypeScript applications. Contains rules across 4 categories — security, performance, architecture, and quality — prioritized by impact.
Reference these rules when:
| Priority | Category | Impact | Prefix | Focus |
|---|---|---|---|---|
| 1 | Security | CRITICAL | sec- |
OWASP/CWE mapped anti-patterns |
| 2 | Performance | HIGH | perf- |
Runtime and build-time optimization |
| 3 | Architecture | MEDIUM | arch- |
Design patterns and code organization |
| 4 | Quality | LOW-MEDIUM | qual- |
Maintainability and code health |
Read individual rule files in rules/ for detailed explanations and code examples.
Each rule contains:
For the complete compiled guide: AGENTS.md
Server Action arguments are deserialized from untrusted HTTP requests. Validate every input with Zod to prevent type confusion and injection attacks. [CWE-20, CWE-502 · A08:2021]
API routes that construct file paths from user input without sanitization allow attackers to read or write arbitrary files using ../ sequences. [CWE-22 · A01:2021]
Next.js middleware can be bypassed (CVE-2025-29927). Always enforce auth checks inside route handlers and Server Actions as defense-in-depth. [CWE-287 · A01:2021]
dangerouslySetInnerHTML bypasses React's XSS protection. Always sanitize HTML from external sources with DOMPurify before rendering. [CWE-79 · A03:2021]
App Router route handlers (GET, POST, PUT, DELETE) are public HTTP endpoints. Every exported function must independently verify auth — middleware alone is insufficient. [CWE-862 · A01:2021]
Unvalidated redirect URLs enable phishing attacks via your domain. Always validate against an allowlist or restrict to relative paths. [CWE-601 · A01:2021]
Props passed to Client Components are visible in the browser. Never pass API keys, tokens, or full database records to client code. [CWE-200 · A01:2021]
Server Actions are public HTTP endpoints not protected by middleware or layout guards. Always verify authentication inside each action. [CWE-862 · A01:2021]
Every Server Action must verify authentication as its first operation. Server Actions compile to public HTTP POST endpoints — anyone on the internet can call them directly with a simple fetch request, bypassing your UI entirely. Even if you have middleware or layout-level auth checks, the action itself must independently verify the user because external guards can be misconfigured, incomplete, or bypassed. Without per-action auth, an attacker can invoke privileged operations like deleting data, changing settings, or accessing resources they should never reach.
String concatenation in database queries creates injection vulnerabilities. Always use parameterized queries or ORM query builders. [CWE-89 · A03:2021]
Next.js has no built-in rate limiting. Without it, login, signup, password reset, and Server Actions are vulnerable to brute force and credential stuffing. [CWE-799, CWE-307 · A04:2021]
Next.js Server Actions rely on Origin header checks, not CSRF tokens. Reverse proxies and misconfigured allowedOrigins can bypass this protection. [CWE-352 · A01:2021]
Setting Access-Control-Allow-Origin to wildcard or reflecting the request Origin lets any website make authenticated requests to your API. [CWE-942 · A05:2021]
Accepting file uploads without validating MIME type, size, extension, and filename sanitization enables code execution, storage abuse, and path traversal. [CWE-434 · A04:2021]
Misconfigured caching of Next.js ISR/SSR responses allows attackers to poison cached pages with blank or malicious content, causing DoS for all users. [CWE-444 · A05:2021]
Session cookies without HttpOnly, Secure, and SameSite are vulnerable to XSS theft and CSRF. The Next.js cookies() API does not enforce secure defaults. [CWE-614, CWE-1004 · A05:2021]
Sequential await calls on independent operations create request waterfalls. Use Promise.all or Suspense boundaries to parallelize.
Fetching related data inside loops creates N+1 queries that scale linearly with data size. Use eager loading or batch queries instead. [CWE-400]
Large client libraries loaded synchronously block the initial page load. Use next/dynamic or React.lazy to code-split and load them on demand.
Raw <img> tags skip automatic optimization, lazy loading, and responsive sizing. next/image provides WebP/AVIF conversion, blur placeholders, and CLS prevention.
useEffect hooks that set up subscriptions, timers, or event listeners without cleanup cause memory leaks, stale state updates, and race conditions.
Only add "use client" when a component needs hooks, event handlers, or browser APIs. Every unnecessary "use client" directive ships the component and all its dependencies to the browser as additional JavaScript — slowing down page loads, increasing bandwidth costs, and degrading the experience for users on slow connections or low-powered devices.
Inline objects, arrays, and functions as props create new references every render, defeating React.memo and causing cascading re-renders across the tree.
Adding 'use client' unnecessarily ships component JS to the browser. Only use it when you need hooks, event handlers, or browser APIs.
Barrel file imports in Client Components force bundlers to load entire libraries. Use direct imports or Next.js optimizePackageImports.
Event handlers and effects that capture state in closures can reference outdated values, causing silent data corruption and missed updates.
External font loading from Google Fonts or CDNs causes layout shift and render-blocking requests. next/font self-hosts fonts with zero layout shift.
Using array indices as key props causes incorrect state preservation, UI corruption, and degraded performance when lists are reordered or filtered.
Hardcoded secrets persist in Git history forever. Use environment variables and never prefix secrets with NEXT_PUBLIC_. [CWE-798 · A07:2021]
Using 'any' or 'as any' at API boundaries, form handlers, and external data silently disables TypeScript safety, causing runtime crashes from unexpected data. [CWE-20]
Casting API responses, form data, or URL params with 'as Type' bypasses TypeScript guarantees. When the shape doesn't match, crashes happen far from the boundary. [CWE-20]
TypeScript types vanish at runtime. Validate external data at system boundaries with Zod to prevent crashes from unexpected shapes. [CWE-20]
Components handling data fetching, business logic, state, and rendering are hard to test and maintain. Decompose by responsibility.
Without error boundaries, a single component failure crashes the entire page. Use error.tsx and granular ErrorBoundary wrappers.
Missing loading.tsx causes full-page spinners instead of granular streaming. Missing error.tsx lets errors crash parent layouts instead of being contained.
BeforeMerge scans your pull requests against all 35 beforemerge-nextjs-review rules automatically. Get actionable feedback before code ships.