我得到这个错误"Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'"当我试图创建我的网页在NextJS. 我不想在构建时生成任何静态页面,那么为什么我需要创建一个'getStaticPaths'函数呢?
export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
return {
paths: [], //indicates that no page needs be created at build time
fallback: 'blocking' //indicates the type of fallback
}
}
export default function componentName(props) {
return(
<div></div>
)
export async function getStaticPaths(ctx) {
return {
paths: [], //indicates that no page needs be created at build time
fallback: 'blocking' //indicates the type of fallback
}
}
export async function getStaticProps(ctx) {
//-----------api call ------------
}
6条答案
按热度按时间kqhtkvqz1#
如果您正在创建一个动态页面,例如:
product/[slug].tsx
,那么即使你不想在构建时创建任何页面,你也需要创建一个getStaticPaths
方法来设置fallback
属性,并让NextJS知道当你试图获取的页面不存在时该怎么做。getStaticPaths
主要做两件事:paths
数组)fallback
类型)byqmnocz2#
动态路由下一个J
页面/用户/[id].js
esyap4oy3#
使用
getServerSideProps()
而不是getStaticProps()
渲染动态路由例如:
You can check here as well
yruzcnhs4#
如果你使用
getStaticPaths
,你告诉next.js你想要预生成那个页面,但是因为你在动态页面中使用它,next.js不知道它需要创建多少页面。使用
getStaticPaths
,我们获取数据库。如果我们正在渲染博客,我们获取数据库来决定我们有多少博客,什么是idOfBlogPost
,然后基于这些信息,getStaticPath
将预先生成页面。另外,
getStaticProps
并不只是在构建时运行,如果添加revalidate:numberOfSeconds
,next.js将在“numberOfSeconds”时间后重新创建包含新鲜数据的新页面。uajslkp65#
当我尝试在我的next.js项目中使用getStaticProps时,我得到了同样的错误。
eit6fx6z6#
您正在呈现动态路径,因此请使用getServerSideProps()而不是getStaticProps()