Next.js Interview Questions - getStaticProps, getStaticPaths, getServerSideProps

Last updated on 17 Mar, 2021


Why we use getStaticProps?


Next.js can prerender pages. getStaticProps is a method in a Next.js page which is executed during build step. It can set the data ready for the actual page to prerender. It is mainly used to:

  • Fetch data required for the page
  • If the fetched data can be publicly accessed. That means, it can be stored in CDNs
  • Pre-render pages for better SEO


In my ecommerce website, I have got a product details API to fetch product information. The API endpoint is /products/:productid. Here is a sample API response.

  "name": "Brother Monochrome Laser Printer",
  "color": "Black"

The product details page HTML looks like below.

  <h1>Product Name</h1>

How to use the API response in the HTML during pre-rendering?


In order to populate the HTML with data during pre-rendering step, we need to use getStaticProps. For that we need to export an async function called getStaticProps from the page.

export async function getStaticProps() {
  const response = await fetch("...");

  return {
    props: response,

As the name suggests, getStaticProps function supply static props values required in the pre-rendering phase. Here getStaticProps supplies name and color to the component. So the next step is to consume the prop values in products component.

function products(props) {
  return (
--- ○ ---
Joby Joseph
Web Architect