nextjs-server-side-error-debugging

Check the terminal where `npm run dev` or `next dev` is running. Server-side errors from getServerSideProps and API routes print full stack traces there, not in the browser console or DevTools.

The error occurs in server-side code, which executes in Node.js, not the browser. The browser only receives the generic 500 response, while the actual stack trace appears in the server terminal or hosting logs.

Open the Vercel dashboard, select your project, and check the Logs section under the Functions tab. For AWS use CloudWatch Logs, for Netlify check the Functions tab, and for self-hosted setups inspect the Node.js process logs.

Wrap the data fetching logic in a try-catch block, log the error with console.error, and return the error message as a prop instead of throwing. This renders an error state in the page rather than crashing with a 500.

Client-side transitions fetch data via JSON requests handled in the browser context, while a refresh triggers full server-side rendering. Errors in getServerSideProps or getStaticProps only execute during the server render path.

Common causes include missing environment variables in production, database connection failures, server-only code imported on the client, missing await on async calls, and non-serializable objects like dates or functions returned as props.