Pre-rendering Dynamic Routes with getStaticProps

Pre-render dynamic routes using getStaticProps and demonstrate how to use getStaticPaths to define a list of paths to be statically generated.
export async function getStaticPaths() {
  // Fetch the list of item ids
  const items = await fetchListOfItems();
  // Generate the paths we want to pre-render based on items
  const paths = => ({
    params: { id: },

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
Defines a list of paths that have to be rendered to HTML at build time. getStaticPaths is used in dynamic pages to specify which paths will be pre-rendered.
export async function getStaticProps({ params }) {
  // Fetch necessary data for the page using
  const itemData = await fetchItemData(;
  // The returned 'props' will be passed to the page component
  return { props: { itemData } };
Fetches the necessary data for each page based on the dynamic route and passes the data to the page under 'props'. This function runs at build time.
function Item({ itemData }) {
  // Render item data
  return (

export default Item;
The page component that receives the static props and renders the page's content based on the pre-fetched data.