Fetch Static Data From API | Next.js | getStaticProps

Static data can be fetched during build time itself in Next.js. Let’s see how.

getStaticProps can be used to fetch static data in Next.js in server side and pass it on to the page during render.

getServerSideProps can also be used to fetch data. But here since the data to be fetched is static it doesn’t make sense to wait till the page is requested. We can fetch static data during build time itself. Hence getStaticProps is the right method to be used for fetching static data.

Define getStaticProps method inside the next.js page. Inside this method what ever you do will get executed only on server side and not on browser. getStaticProps method gets executed during next build.

Note : getStaticProps doesn’t have access to incoming request like getServerSideProps

export default function Brands({data}:{data:any}) {
  return (
    <>
      <h3>
        Welcome to Brands !! {data[2]['title']}
      </h3>
    </>
  )
}

export async function getStaticProps(context:any) {
  // ## fetch data from API
  let query = await fetch('https://jsonplaceholder.typicode.com/todos/')
  let data = await query.json();
  // ## pass data to the page component as props
  return {
    props: {data}, 
  }
}