Explore

Lifting state higher than necessary causes unnecessary re-renders in the parent and all siblings. Keep state as close as possible to where it is consumed.

Passing props through 3+ levels of intermediate components that don't use them creates tight coupling and maintenance burden. Use context, composition, or state management.

Duplicating stateful logic (useState + useEffect patterns) across multiple components leads to inconsistency and maintenance burden. Extract into reusable custom hooks.

Monolithic components with deeply nested ternaries and conditionals are hard to read, test, and extend. Use composition patterns (children, render props, compound components).

dangerouslySetInnerHTML bypasses React's XSS protection. Always sanitize HTML from external sources with DOMPurify before rendering. [CWE-79 · A03:2021]

String concatenation in database queries creates injection vulnerabilities. Always use parameterized queries or ORM query builders. [CWE-89 · A03:2021]

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]

Server Actions are public HTTP endpoints not protected by middleware or layout guards. Always verify authentication inside each action. [CWE-862 · A01: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]

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]

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]

Unvalidated redirect URLs enable phishing attacks via your domain. Always validate against an allowlist or restrict to relative paths. [CWE-601 · 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]

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]

Accepting file uploads without validating MIME type, size, extension, and filename sanitization enables code execution, storage abuse, and path traversal. [CWE-434 · 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]

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]

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]

TypeScript types vanish at runtime. Validate external data at system boundaries with Zod to prevent crashes from unexpected shapes. [CWE-20]

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]

Hardcoded secrets persist in Git history forever. Use environment variables and never prefix secrets with NEXT_PUBLIC_. [CWE-798 · A07:2021]

useEffect hooks that set up subscriptions, timers, or event listeners without cleanup cause memory leaks, stale state updates, and race conditions.