Next.js blog site deployment to Vercel failing with "Cannot read properties of undefined" error
The error you're seeing is a classic Next.js static generation issue. During build time on Vercel, your getStaticPaths generates paths for blog posts, but getStaticProps isn't returning the post data properly, so your component receives undefined instead of a post object with a title property.
This is NOT related to your custom domain or CORS settings - those would cause runtime errors, not build failures. The issue is that your component is trying to access post.title when post is undefined.
The Root Cause
Looking at your code, you have fallback: true in getStaticPaths. This means Next.js will try to generate pages for slugs that weren't pre-rendered at build time. However, when fallback: true is used, the component can receive undefined props during the initial render.
Solutions
1. Add a Loading State for Fallback Pages
When using fallback: true, you need to handle the case where the post hasn't loaded yet:
import { useRouter } from 'next/router'
const Post = ({post}) => {
const router = useRouter()
// Add this check for fallback pages
if (router.isFallback) {
return <div>Loading...</div>
}
// Add a safety check in case post is still undefined
if (!post) {
return <div>Post not found</div>
}
const {
title = 'Missing title',
name = 'Missing name',
categories,
mainImage,
authorImage,
body = []
} = post
// rest of your component...
}2. Use fallback: false or fallback: 'blocking'
If you want all posts generated at build time, change your getStaticPaths:
export async function getStaticPaths() {
const paths = await client.fetch(
groq`*[_type == "post" && defined(slug.current)][].slug.current`
)
return {
paths: paths.map((slug) => ({params: {slug}})),
fallback: false, // or 'blocking'
}
}fallback: false= 404 for any path not returned bygetStaticPathsfallback: 'blocking'= server-render on first request without showing a fallback
3. Add Error Handling in getStaticProps
export async function getStaticProps(context) {
const { slug = "" } = context.params
const post = await client.fetch(query, { slug })
// Return 404 if post doesn't exist
if (!post) {
return {
notFound: true,
}
}
return {
props: {
post
}
}
}4. Check Your Environment Variables
The most common cause of this working locally but failing on Vercel is missing environment variables. Make sure you've added these in your Vercel project settings (Settings → Environment Variables):
NEXT_PUBLIC_SANITY_PROJECT_IDNEXT_PUBLIC_SANITY_DATASETSANITY_API_TOKEN(if using authenticated requests)
Add them for all environments (Production, Preview, Development).
5. Ensure Your Sanity Client is Configured Correctly
Make sure your client uses useCdn: false for build-time queries and includes an API version:
const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
apiVersion: '2023-05-03', // use a specific date
useCdn: false, // important for build time
})Setting useCdn: false ensures you're getting the latest data during builds, which is important for static generation.
Why It Eventually Worked
You mentioned it worked after redeploying 3 times - this often happens when:
- Environment variables took a moment to propagate
- Vercel's cache needed clearing
- The Sanity CDN cache synchronized
This is a common issue in the community. The typical culprits are environment variables and missing fallback handling.
The best long-term fix is implementing options #1, #2, and #3 above to make your code more resilient. This way, even if something goes wrong during the build, your app will handle it gracefully instead of crashing with the "Cannot read properties of undefined" error.
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.