getStaticPaths and getStaticProps are failing during next build

Question

I have this Next.js Application with a [slug] for Static Site Generation, all is good and works fine on my localhost and when I try to deploy it the following error shows:

“Unhandled error during request: TypeError: Cannot read property ‘title’ of undefined”.

And when I try to run next build command on my localhost the following error shows:

Error occurred prerendering page "/jobs/[slug]". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: Cannot read property 'title' of undefined

Here is the code for your information

export default function Listing({ job }) {

    const router = useRouter()

    if (!router.isFallback && !job?.slug) {
        return <ErrorPage statusCode={404} />
    }

    return (
        <div >
            <div >
                <div >
                <div >
                <div >
                <div>
                    <h1>
                    <span>Job Center</span>
                    <span >{job.title}</span>
                    <p>We are looking for interested candidates for the following position. </p>
                    </h1>
                    <div>
                            <div >
                                <span>Position: </span><span>{job.title}</span> //and multiple fields like this
                            </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    )
    
}
 
export async function getStaticProps({ params, preview = false }) {
    const data = await getJobAndMoreJobs(params.slug, preview)
    return {
        props: {
            preview,
            job: data.job
        },
    }
}

export async function getStaticPaths() {
    const jobs = await getAllJobsWithSlug()
    return {
        paths: jobs.map(({ slug }) => ({
            params: { slug },
        })),
        fallback: true,
    }
}

Furthermore I have another API file which pulls the data from a fetchAPI from a GraphQL Schema and Query. Here is the attached code below:

async function fetchAPI(query, { variables, preview } = {}) {

    const res = await fetch(process.env.JOBS_PROJECT_API, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${
              preview
                ? process.env.JOBS_DEV_AUTH_TOKEN
                : process.env.JOBS_PROD_AUTH_TOKEN
            }`,
        },
        body: JSON.stringify({
            query,
            variables,
        }),
    })
    
    const json = await res.json()
  
    if (json.errors) {
        console.log(process.env.NEXT_EXAMPLE_CMS_GCMS_PROJECT_ID)
        console.error(json.errors)
        throw new Error('Failed to fetch API')
    }
  
    return json.data
    
}
  
export async function getPreviewPostBySlug(slug) {

    const data = await fetchAPI(
        `
        query PostBySlug($slug: String!, $stage: Stage!) {
            post(where: {slug: $slug}, stage: $stage) {
              slug
            }
        }`,
        {
            preview: true,
            variables: {
                stage: 'DRAFT',
                slug,
            },
        }
    )
    
    return data.job
    
}
  
export async function getJobAndMoreJobs(slug, preview) {

    const data = await fetchAPI(
        `
        query JobBySlug($slug: String!, $stage: Stage!) {
            job(stage: $stage, where: {slug: $slug}) {
                title
                section
                slug
                vacancies
                rank
                classification
                placeOfWork
                basicSalary
                serviceAllowance
                allowances {
                    name
                    percent
                    requirement
                }
                responsibilities
                requirement
                documents
                expirationDate
                expectedInterviewDate
                gazetteLink
                a2Form {
                    url
                }
            }
            moreJobs: jobs(orderBy: publishedAt_DESC, first: 2, where: {slug_not_in: [$slug]}) {
                title
                slug
                title
                section
                slug
                vacancies
                rank
                classification
                placeOfWork
                basicSalary
                serviceAllowance
                expirationDate
                expectedInterviewDate
                }
            }      
        `,
        {
            preview,
            variables: {
                stage: preview ? 'DRAFT' : 'PUBLISHED',
                slug,
            },
        }
    )
    
    return data
    
}

Any help regarding this is much appreciated! Cheers!

Answer 1

Just ran into this same issue and finally figured it out via the Next Documentation on getStaticPaths with fallback: true:

If fallback is true, then the behavior of getStaticProps changes:

• The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path (see “Fallback pages” below for details). Note: this "fallback" version will not be served for crawlers like Google and instead will render the path in blocking mode.

...

In the “fallback” version of a page: The page’s props will be empty.

This means that Next will render a fallback version of this page at build time as if you'd returned props: {} from getStaticProps. Because there's no job prop passed, adding job.title to your JSX is causing the error you're seeing.

Assuming you'd like to keep fallback: true enabled, there are two ways to resolve this:

1. Gracefully handle empty page props

Ensure that the page successfully renders even if passed an empty props object. In this case, you could use default/fallback values:

export default function Listing({ job = { title: "Fallback Title" } }) {
    // ...
    return (
        <div>
            <span>{job?.title}</span>
            <span>{job?.title || "Fallback Title"}</span>
        </div>
    );
}

2. router.isFallback

If a page is being rendered as a fallback, Next's router will have a property isFallback set to true. You can bail out entirely from rendering by checking for this:

export default function Listing({ job }) {

    const router = useRouter()

    if (router.isFallback) return null;

    // ...rest of component
}