score:0
if i understand correctly: you have an overview page and detail pages. in routing terms, this would look like: /overview and /overview/${id}
you should take a look at https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation. in more detail:
// pages/posts/[id].js
function post({ post }) {
// render post...
}
// this function gets called at build time
export async function getstaticpaths() {
// call an external api endpoint to get posts
const res = await fetch('https://.../posts')
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 }
}
// this also gets called at build time
export async function getstaticprops({ params }) {
// params contains the post `id`.
// if the route is like /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 via props
return { props: { post } }
}
export default post
inside getstaticpaths, you define what dynamic paths are available. next.js will generate these pages. inside getstaticprops, you pass in the object you return from getstaticpaths. inside the return of this function, you pass all the info/props you need to build the detail page.
Source: stackoverflow.com
Related Query
- Next.js / React single page app needs urls for each item
- react app refreshing page for each item deletion
- In react ' const {item}= props; ' here props is an obj, then what item means? A obj of props, or a single temp obj for each obj in prop like map
- structure of a Backbone and React single page app
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- Next JS npm start app load 404 page not found error for physical pages
- How to use a different delay for each item with React transition group?
- Enable single page app react hot reload webpack
- How to deploy react app to Github pages for personal page
- Linkedin tracking for single page app in Google Tag Manager
- Percentage loading bar for React / Redux app like Pace.js that only shows on initial page load
- Serving a static html page from a single page react app with react router
- react counter for each item of list
- How to render custom elements for each item in an object (Map data structure) in React TS?
- Is there a way to configure Apache to auto-recognize URLs for Django vs React without hard-coding each endpoint?
- update react state for a single user details page
- Bootstrap Navbar does not work in React JS for single page website
- Keeping Google login persistent on reloading single page react app
- Redux, React for single page application login and logout
- React : Display relevant data next to each other in list item
- React Where to place login page for a one page app with a side menu
- React toggle read more for each item separately
- GitHub Pages Page Not Found for React App
- How to deploy a React App for each PR in a different URL on Azure?
- Compare each item with its next item and find each item big or small by comparing. And push the result to a new array for each
- I'm trying to scroll to top of each page using react app
- Why is React onLeave={} being executed for every single page switch, instead only in the assigned one?
- react calls function for each item in array
- GitHub pages link returns blank page for React app
- nginx config for react Single Page Apps (SPA) hosted on s3 not working
More Query from same tag
- Is it possible to change the displayName of a Context.Consumer?
- How to specify type parameters in typescript declaration?
- Calling Multiple component in same page in React.js
- NEXT JS - MongoDB| 500: Internal Server Error after Deployment on Vercel
- Get query parameters in React, Typescript
- Django Rest Framework + React rest hooks CORS error
- Typescript & Redux connect
- Can't change class in React
- Styled components using pseudo element :checked
- Ant Design - How can i get count of table row after filtering?
- filter by multiple array by matching object properties
- Manipulating React State from an Existing DOM Node
- React: Merging nested json data with parent data to create multiple objects
- React Bootstrap Accordion Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)
- handling backbone model/collection changes in react.js
- My submit button is not getting enabled . How do i do that?
- Is it possible to get values for <options> from an endpoint that sends back json response using axios?
- How is it that my React component understands the 'children' property?
- React widgets within text (static HTML)
- How to use different font from Google Fonts on "Headings" of bootstrap?
- Pass data between class components through link in reactjs
- Should I add async code in container component?
- how to apply bootstrap active class to an onclick
- Not able to display the data stored in a state object in react
- I have an error trying to fetch data from database to frontend using GET method
- Add pseudo-element on Material UI BottomNavigationAction
- Import a Reactjs variable into Sass // Assign a ReactJS element class name to a Sass variable
- Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`
- React won't respond to any request
- Conditional position left/right in React style