Javascript GetStaticPath和GetStaticProp在下一次生成过程中失败
我有一个用于静态站点生成的带有[slug]的Next.js应用程序,一切都很好,在本地主机上运行良好,当我尝试部署它时,以下错误显示:Javascript GetStaticPath和GetStaticProp在下一次生成过程中失败,javascript,next.js,getstaticprops,getstaticpaths,Javascript,Next.js,Getstaticprops,Getstaticpaths,我有一个用于静态站点生成的带有[slug]的Next.js应用程序,一切都很好,在本地主机上运行良好,当我尝试部署它时,以下错误显示: “请求期间未处理的错误:TypeError:无法读取未定义的属性“title”。 当我尝试在本地主机上运行下一个构建命令时,会显示以下错误: 预呈现页面“/jobs/[slug]”时出现错误。阅读更多:https://nextjs.org/docs/messages/prerender-error TypeError:无法读取未定义的属性“title” 这是您的
“请求期间未处理的错误:TypeError:无法读取未定义的属性“title”。
当我尝试在本地主机上运行下一个构建命令时,会显示以下错误:
预呈现页面“/jobs/[slug]”时出现错误。阅读更多:https://nextjs.org/docs/messages/prerender-error TypeError:无法读取未定义的属性“title”
这是您的信息代码
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,
}
}
非常感谢您的帮助!干杯 您能检查fetch调用响应的内容吗?看起来请求在生产构建期间失败了,并且您的错误处理过程可能不正确(因为它在localhost中工作,所以您无法判断错误场景发生时是否正确处理)。
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
}