This is a collection of React, Next.js usage examples by notion-api written with typescript.

I'm still writing various examples, so if you find a problem, please leave an issue!

rendering NOTION_INDEX_PAGE with SSG

• src : pages/index.tsx

• demo site : https://nextjs-notion-api.vercel.app/

• original Notion Page : https://www.notion.so/Notion-API-Next-js-INDEX-PAGE-13cb8d2d3328425e815a1896267f5906

rendering notion page for [page_id] with SSG

• src : pages/pages/[page_id].ts
• example demo site : https://nextjs-notion-api.vercel.app/pages/e3739c70-85d9-4cbf-9713-909a27e4093c
• example Notion Page : https://www.notion.so/SubPage-e3739c7085d94cbf9713909a27e4093c

• GET

• success - 200 :

  {
    "page": Page // https://developers.notion.com/reference/page;
  }

• error - 500 :

  {
    "page": null,
    "error": string,
    "code": ClientErrorCode | APIErrorCode,
  }

• GET

• success - 200 :

  {
    "database": Database // https://developers.notion.com/reference/get-database;
  }

• error - 500 :

  {
    "database": null,
    "error": string,
    "code": ClientErrorCode | APIErrorCode,
  }

• GET

• query

  • start_cursor?: string;
  • page_size?: string;

• success - 200 :

  {
    "pages": Page[] // https://developers.notion.com/reference/page;
  }

• error - 500 :

  {
    "pages": null,
    "error": string,
    "code": ClientErrorCode | APIErrorCode,
  }

• src : components/notion/RichText/RichText.tsx

• value : RichText

• src : components/notion/Block/Block.tsx

• value : Block