getStaticPaths и getStaticProps не работают во время следующей сборки

Question

У меня есть это приложение Next.js с [slug] для создания статического сайта, все в порядке и отлично работает на моем локальном хосте, и когда я пытаюсь его развернуть, появляется следующая ошибка:

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

И когда я пытаюсь запустить следующую команду сборки на моем локальном хосте, появляется следующая ошибка:

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

Вот код для вашей информации

      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,
        }
      }

Кроме того, у меня есть еще один файл API, который извлекает данные из fetchAPI из схемы и запроса GraphQL. Вот прикрепленный ниже код:

          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

Просто столкнулся с этой же проблемой и, наконец, понял это через следующую документацию на getStaticPathsс :

Если fallback есть, то поведение изменений:

• Пути, которые не были созданы во время сборки, не приведут к странице 404. Вместо этого Next.js будет обслуживать «резервную» версию страницы при первом запросе на такой путь (подробности см. В разделе «Резервные страницы» ниже). Примечание: эта «резервная» версия не будет обслуживаться такими сканерами, как Google, и вместо этого будет отображать путь в режиме блокировки.

...

В «резервной» версии страницы: свойства страницы будут пустыми.

Это означает, что Next будет отображать резервную версию этой страницы во время сборки, как если бы вы вернули props: {} из getStaticProps. Потому что нет job пропущен, добавление job.title к вашему JSX вызывает ошибку, которую вы видите.

Предполагая, что вы хотите сохранить fallback: true включен, есть два способа решить эту проблему:

1. Изящно обрабатывайте пустые реквизиты страницы.

Убедитесь, что страница успешно отображается, даже если передан пустой объект props. В этом случае вы можете использовать значения по умолчанию / резервные:

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

2. router.isFallback

Если страница обрабатывается как резервная, Next router будет иметь собственность isFallback установлен в true. Вы можете полностью отказаться от рендеринга, проверив следующее:

      export default function Listing({ job }) {

    const router = useRouter()

    if (router.isFallback) return null;

    // ...rest of component
}