Debugging & Production Anti-Patterns
Senior interview rounds frequently test candidates on real-world troubleshooting scenarios and subtle framework traps.Diagnose and fix React hydration mismatches caused by browser extensions, date formatting, and invalid HTML tag nesting.Debug why redirect() throws when wrapped in generic try/catch blocks, prevent cache poisoning leaks in shared server environments, and resolve infinite redirect loops in edge routing matchers.
Hydration Mismatch: Root Causes & Systematic Debugging
A hydration mismatch occurs when the HTML prerendered on the server does not strictly match the DOM generated by the client during initial React hydration. Common root causes include browser-only APIs (window, localStorage), client-side date/timezone formatting, invalid HTML nesting (e.g. <p> inside <p> or <div> inside <p>), and browser extensions injecting attributes.
Stale Router Cache Traps After Non-Server-Action Mutations
When mutations are executed outside of Server Actions—such as via direct fetch() to external REST APIs or third-party webhooks—the Next.js client-side Router Cache remains unaware of the change. Navigating back to the page displays stale cached RSC payloads. Developers must programmatically purge the cache using useRouter().refresh() or route segment revalidation.
Next.js Redirect Exception Suppression in try/catch Blocks
In Next.js, redirect() and notFound() intentionally throw internal JavaScript exceptions (NEXT_REDIRECT and NEXT_NOT_FOUND) to interrupt control flow. A notorious bug occurs when developers wrap Server Actions or Route Handlers in generic try/catch blocks that catch these framework exceptions, mistaking them for application errors and suppressing navigation.
Cache Poisoning & Cross-User Data Leaks in Shared Environments
A catastrophic security vulnerability occurs in Next.js when user-specific private data (e.g. account balances, profile emails, auth tokens) is cached in the shared server Data Cache or Full Route Cache. Subsequent visitors then receive the first user's cached private information from the CDN or server cache without ever hitting the database.
Network Interceptor Traps: Regex Catastrophes and Infinite Loops
Network interceptors (middleware.ts and proxy.ts) execute before every HTTP request. Fatal production anti-patterns include: 1) Flawed matcher regexes that intercept internal static assets (/_next/static, favicon.ico), 2) Infinite redirect loops caused by redirecting to a route that triggers the same redirect condition, and 3) Catastrophic backtracking in poorly structured regular expressions (ReDoS).