Vercel Build Failure: Cannot read properties of undefined (reading 'title')

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 by getStaticPaths
• fallback: '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_ID
• NEXT_PUBLIC_SANITY_DATASET
• SANITY_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.