动态链接Navbar

Question

我对从mongodb获取数据的动态Navbar感兴趣。

这是我的结构：

# src

* [components/]
  * [Navbar.js]]
  * [Layout.js]]
* [pages/]
  * [index.js]
  * [_app.js]

虽然如果我没有弄错的话，也不可能在getServerSideProps内部Components，或者在_app.js里面。

我听说过getInitialProps，但我还没能把头绕着它，而且它也会导致一个讨厌的道具钻探。

_app.js ->布局->海军

现在，根据从mondodb获取的内容，您将如何使用具有动态链接的Navbar呢？

Answer 1

我认为nextJs有关于这个主题的文档。https://nextjs.org/docs/basic-features/pages

export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../mongodb')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

这样做的目的是生成一个路径列表。但是您的mongodb需要在编译时调用，而不是运行时。