错误 'getStaticPaths 只能用于动态页面，不能用于 Next JS 的 '/''

如何解决错误 'getStaticPaths 只能用于动态页面，不能用于 Next JS 的 '/''

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

我的带有动态路由的文件夹：

页面/文章/[category]/[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 '/'.

解决方法

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

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

您可以在此处找到一个示例：https://github.com/vercel/next.js/blob/master/examples/with-static-export/pages/index.js