Explore

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.

Inline objects, arrays, and functions as props create new references every render, defeating React.memo and causing cascading re-renders across the tree.

Event handlers and effects that capture state in closures can reference outdated values, causing silent data corruption and missed updates.

Adding 'use client' unnecessarily ships component JS to the browser. Only use it when you need hooks, event handlers, or browser APIs.

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]

Using array indices as key props causes incorrect state preservation, UI corruption, and degraded performance when lists are reordered or filtered.

Raw <img> tags skip automatic optimization, lazy loading, and responsive sizing. next/image provides WebP/AVIF conversion, blur placeholders, and CLS prevention.

External font loading from Google Fonts or CDNs causes layout shift and render-blocking requests. next/font self-hosts fonts with zero layout shift.

Large client libraries loaded synchronously block the initial page load. Use next/dynamic or React.lazy to code-split and load them on demand.

Barrel file imports in Client Components force bundlers to load entire libraries. Use direct imports or Next.js optimizePackageImports.

Missing loading.tsx causes full-page spinners instead of granular streaming. Missing error.tsx lets errors crash parent layouts instead of being contained.

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.

API routes with business logic are hard to test, audit, and secure. Keep route handlers under 100 lines by delegating to service classes. [CWE-1064]