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 key	Description	Example
params	Parameters for the route	{ id: "article-slug"}
preview	Depends on the preview mode	true or undefined
previewData	Data set by setPreviewData	en-US
locale	Current locale of your internationalized Next.js application	en-US
locales	All the locales of your internationalized Next.js application	en-US or fr
defaultLocale	Default locale of your internationalized Next.js application	en-US

Return value of getStaticProps

The getStaticProps function should return an object with:

Name	Description	Optional	Type
props	Whatever is passed will be props to the page	✅	Serializable object
revalidate	Time after which re-generation of page occurs	✅	Time (seconds)
notFound	Allows the page to return a 404 status	✅	Boolean
redirect	Redirect 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.