Error occurred prerendering page "/my_page". TypeError: Cannot read properties of undefined

Vercel

Nextjs

Created: 28 December, 2024

Backstory

Expecting props to be populated which are not available during prerendering

When deploying a Next.js application to Vercel, the /my_page failed to prerender at build time, resulting in the following error:

TypeError: Cannot read properties of undefined

The error occurred because the backend API endpoint (api/my_endpoint) was not properly integrated on Render.com, causing Next.js to fail when trying to fetch data during the build process. This worked locally since the API was accessible.

Locally:

The /api/my_endpoint returned data when accessed via Thunder Client or directly in the browser. The Next.js application successfully pre-rendered the /my_page page during development.

Deployed Environment:

On Render.com, accessing the /api/my_endpoint through the browser resulted in a server error. This caused the Next.js build to fail as it couldn’t retrieve data from the API for prerendering.

Busted! 🎆

I Cleared the build cache and redeployed on Render.com.

Verified the API endpoint through the browser to ensure it returned data.

Redeploy the Next.js application, which successfully fetched the data and pre-rendered the /my_page.

Key Takeaways

Always verify that your API endpoints are functional on the deployed environment, not just locally. If Next.js relies on external data for prerendering, ensure that the data source is accessible during the build process.

Clearing build caches and redeploying can resolve deployment issues caused by stale configurations.

bj.dev logo

Bolaji Bolajoko © 2025

Powered By React, Nextjs, and Vercel