next.js - 错误“getStaticPaths 只能用于动态页面，不能用于 Next JS”

Question

我想将 getStaticPaths 用于具有动态路由的帖子博客，但在构建时出现错误。

我的动态路由文件夹：

页面/文章/[类别]/[slug].js

我的链接导航：

    <Link href={`/article/${category}/${slug}`} passHref>
      <Card>
        ...some data
      </Card>
    <Link />

我的 getStaticPaths：

export async function getStaticPaths () {
   
  // retrieve data from cms

  const data = await getAllPreviewPosts()

  // generate the paths

  const paths = data.map( ({ fields: { slug , stackName } }) => ({ 
   params: { category: stackName, slug: slug } 
   }))

  return {
     paths, 
     fallback: false
  }   
}

export async function getStaticProps () {
 /* ... get data from cms */
}

但是当我运行npm run build我得到这个错误：

Error: getStaticPaths can only be used with dynamic pages, not '/'.

Answer 1

getStaticPaths定义导出时 next.js 必须呈现哪些页面。它用于生成所有可用的动态路由。您不能在页面本身上使用该数据。

要让所有可用的类别和 slug 在您的导航组件中使用它，您需要使用getStaticProps来加载页面上的数据并将其作为道具传递给您的导航组件。

你可以在这里找到一个例子：https ://github.com/vercel/next.js/blob/master/examples/with-static-export/pages/index.js