I am interested in making a dynamic Navbar fetching datas from mongodb.
This is my structure :
# src
* [components/]
* [Navbar.js]]
* [Layout.js]]
* [pages/]
* [index.js]
* [_app.js]
Though it is not possible to getServerSideProps inside of Components if I am not mistaken, nor inside of _app.js.
I've heard of getInitialProps but I haven't been able to wrap my head around it and also it would lead into a nasty prop drilling.
_app.js -> Layout -> Navbar
Now, how would you do a Navbar with dynamics links according to what's fetched from mondodb?
I think nextJs has a documentation on this topic. 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 }
}
The idea is to generate a list of paths. But your mongodb needs to be called in the compile time, not runtime.