🛠️ Debugging in Next.js

Debugging in Next.js can be done using built-in error handling, logging, browser DevTools, VS Code Debugger, and debugging tools like React DevTools.

📌 1. Debugging with console.log()

The simplest way to debug is by adding console.log() in your code.

🔹 Example

javascript
,  "configurations": [    {      "name": "Next.js Debugging",      "type": "node",      "request": "attach",      "port": 9229,      "restart": true: true: "inspector",      "timeout": 30000    }  ]}

5️⃣ Start Next.js with debugging:

bash
NODE_OPTIONS='--inspect' next dev

6️⃣ Open VS Code → Run → Start Debugging

✅ Allows setting breakpoints inside Next.js
✅ Step through server-side code

📌 5. Debugging Server-Side Code (Backend)

For debugging server-side functions (getServerSideProps, API routes, middleware), use:

javascript
console.log("Debugging SSR");debugger; // This will pause execution if debugging is enabled

Run Next.js with:

bash
NODE_OPTIONS='--inspect' next dev

Then, attach VS Code debugger.

✅ Ideal for debugging API issues
✅ Works with SSR pages

📌 6. Using React Developer Tools

🔹 Steps to Install React DevTools

1️⃣ Install the React Developer Tools extension in Chrome
2️⃣ Open DevTools → Components tab
3️⃣ Inspect component props & state
4️⃣ Use the Profiler to find performance issues

✅ Best for debugging React components in Next.js

📌 7. Handling Errors with next/error

Next.js has built-in error handling with next/error.

🔹 Example: Showing Custom Error Pages

javascript
import Error from "next/error";export default function Page({ errorCode }) {  if (errorCode) {    return <Error <h1>Everything is fine!</h1>;}

✅ Useful for catching server-side errors

📌 8. Checking Logs in Vercel

If your Next.js app is deployed on Vercel, check logs:

• Go to Vercel Dashboard → Your Project

• Click Logs to view real-time errors

✅ Great for debugging in production

📌 9. Using next build for Production Debugging

Run:

bash
next build

This will show errors and warnings before deployment.

✅ Identifies issues before going live

📌 10. Summary: Debugging Methods