Published on

October 8, 2021

What is getStaticProps in Next.js

Next.js offers three ways of fetching data from an API:

  • Server Side Rendering (SSR): Useful when you want to fetch data from the server everytime a page loads. The server sends the generated HTML to the client.
  • Static Site Generation (SSG): Useful when you want to generate the HTML when the site builds. This can increase the build time but ensures that no data fetching happens when a page loads.
  • Incremental Static Re-generation (ISR): Similar to SSG but you can re-generate the HTML of pages after an interval without needing to rebuild the entire site.

In this article, you will know more about getStaticProps which is way in which we can generate static pages for our site (using both SSG and ISR).

Introduction

If your page exports an async function named getStaticProps, Next.js will pre-render this page at build time using the props that are returned by the getStaticProps function.

const Page = ({ articles }) => {
  // ArticlesList is a React component which renders the list of articles.
  return <ArticlesList articles={articles} />;
};

export default Page;

export const getStaticProps = async () => {
  return {
    props: {
      articles: [
        {
          title: "Article one",
          body: "This is the body of article one",
        },
        {
          title: "Article two",
          body: "This is the body of article two",
        },
      ],
    },
  };
};

The TypeScript version of the above will be:

import { GetStaticProps, NextPage } from "next";

interface IProps {
  articles: { title: string; body: string }[];
}

const Page: NextPage<IProps> = ({ articles }) => {
  return <ArticlesList articles={articles} />;
};

export default Page;

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {
      articles: [
        {
          title: "Article one",
          body: "This is the body of article one",
        },
        {
          title: "Article two",
          body: "This is the body of article two",
        },
      ],
    },
  };
};

The context parameter

You can also access the context parameter:

export const getStaticProps = async (context) => {
  return {
    props: {
      // Your props.
    },
  };
};

Contents of the context parameter

The context parameters consists of the following keys:

Name of keyDescriptionExample
paramsParameters for the route{ id: "article-slug"}
previewDepends on the preview modetrue or undefined
previewDataData set by setPreviewDataen-US
localeCurrent locale of your internationalized Next.js applicationen-US
localesAll the locales of your internationalized Next.js applicationen-US or fr
defaultLocaleDefault locale of your internationalized Next.js applicationen-US

Return value of getStaticProps

The getStaticProps function should return an object with:

NameDescriptionOptionalType
propsWhatever is passed will be props to the pageSerializable object
revalidateTime after which re-generation of page occursTime (seconds)
notFoundAllows the page to return a 404 statusBoolean
redirectRedirect to external or internal resources{ destination: string, permanent: boolean }

Use-cases for getStaticProps

  • Data for the page is available at build time via local files or from a headless CMS.
  • Data is generic and doesn't depend on th user.
  • Widely used for blogs and websites where the content doesn't change often.

This post was updated on

October 9, 2021.