NextJS:回退设置为true时失败

Question

我正在为NextJS使用vercel，这是我在getStaticPaths 中的设置

const paths = posts.map((post) => ({
params: { player: post.player, id: post.id },
}))
return { paths, fallback: true }

当我将回退设置为true时，我在vercel中出现了以下错误：

21:55:01.736信息-生成静态页面(1752/1752(21:55:01.736>生成错误发生在21:55:01.739错误：导出在以下路径上遇到错误：21:55:01.739/剪辑/[播放器]/[id]

当回退设置为false时可以，但我真的很喜欢将回退设置为true，这样页面就可以频繁更新。任何帮助都将不胜感激。。。

Answer 1

在/clip/[player]/[id].js文件中，当按需请求该页面时，您需要处理回退状态。

// pages/posts/[id].js
import { useRouter } from 'next/router'
function Post({ post }) {
const router = useRouter()
// If the page is not yet generated, this will be displayed
// initially until getStaticProps() finishes running
if (router.isFallback) {
return <div>Loading...</div>
}
// Render post...
}
// This function gets called at build time
export async function getStaticPaths() {
return {
// Only `/posts/1` and `/posts/2` are generated at build time
paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
// Enable statically generating additional pages
// For example: `/posts/3`
fallback: true,
}
}
// This also gets called at build time
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// Pass post data to the page via props
return {
props: { post },
// Re-generate the post at most once per second
// if a request comes in
revalidate: 1,
}
}
export default Post

https://nextjs.org/docs/basic-features/data-fetching#fallback-真实

Answer 2

我所做的是有条件地呈现我的组件。因此，我的组件接收对象data，并且如果我需要使用data中的值，例如"；标题"；，我会做…

数据？。标题

此外，对于我的整个返回组件，我将有条件地渲染它。例如。。。

{data !== undefined ? (
<div className ='main-content'>
<p> This is the content that I want rendered if data is defined </p>
</div>
) : (
<div className = 'fallback-content'>
<p> This shows if data == undefined </p>
</div>
)