So if I'm understanding correctly, your website has both an overview page and detail pages. From a routing perspective, this would be represented as: /overview and /overview/${ID}
I suggest checking out https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation for more information.
// pages/posts/[id].js
function Post({ post }) {
// Render post...
}
// This function is called at build time
export async function getStaticPaths() {
// Fetch posts from an external API endpoint
const res = await fetch('https://.../posts')
const posts = await res.json()
// Define paths to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// Only pre-render these paths at build time.
// { fallback: false } means other routes will return a 404 error.
return { paths, fallback: false }
}
// Also called at build time
export async function getStaticProps({ params }) {
// params includes the post `id`.
// For example, if the route is /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// Pass post data to the page through props
return { props: { post } }
}
export default Post
In the getStaticPaths function, you specify the dynamic paths available. Next.js will generate these pages accordingly. In getStaticProps, you provide the object returned from getStaticPaths. Within the return of this function, you include all the necessary info/props to construct the detail page.