How to fix “Error - serializing .res.headers returned from ‘getStaticProps’ in `/`. Reason - 'Object'('[object AxiosHeaders]') cannot be serialized as JSON. Please only return JSON serializable data types” in Next.js

Problem Code

export const getStaticProps = async () => {
  const res = await axios.get(
    `https://api.notion.com/v1/pages/${MAIN_PAGE_ID}`,
    {
      headers: {
        "Notion-Version": "2022-06-28",
        Authorization: `Bearer ${notionSecretToken}`,
      },
    }
  );

  return {
    props: {
      res,
    },
  };
};

this throws error like this

How to fix “Error serializing .res2.headers returned from getStaticProps in "/". Reason: object ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types." in Next.js

Answer

variable “res” should be returned as data props in res like res.data

export const getStaticProps = async () => {
  const res = await axios.get(
    `https://api.notion.com/v1/pages/${MAIN_PAGE_ID}`,
    {
      headers: {
        "Notion-Version": "2022-06-28",
        Authorization: `Bearer ${notionSecretToken}`,
      },
    }
  );

  return {
    props: {
      res: res.data,
    },
  };
};