Next.js debugging guides

How to find out what a Next.js app is really doing: on the server, in the browser and in between. Each guide covers the built-in tools first, then shows where qaisdebugs saves time.

How to debug a Next.js applicationThe full walkthrough: logs, network, server and client breakpoints. The best tools to debug a Next.js appBrowser DevTools, React DevTools, the Node inspector, VS Code and more, compared. How to debug Next.js Server ComponentsLogs, breakpoints, data fetching and the common Server Component bugs. How to see server-side network requests in Next.jsWhy the Network tab misses them, and how to see every fetch and axios call. How to debug Next.js API routes and Route HandlersCall them directly, read the request, pause inside, and the classic mistakes. How to debug Next.js Server ActionsWhat an action sends, where its errors go, and the mistakes that break it. Set breakpoints in Next.js with VS Code and Chrome DevToolsThe --inspect flag, chrome://inspect, launch.json, and why breakpoints do not hit. Next.js logs: where console.log goes on the server and in the browserTerminal or browser console, logs in production, and seeing them together. How to debug and fix Next.js hydration errorsWhat hydration mismatches are, the usual causes, and the right fix for each. Debug a Next.js app with Claude, Cursor and MCPLet an AI assistant read your requests and logs and set breakpoints.