Hello everyone, this is my blogpost "Hello world!"

It's written in Notion and pre-rendered on this page using Next.js getInitialProps. It also uses Incremental Static Generation with the validate option so the content updates when the source is edited.

🪄 How does it work?

  • Write blogpost in Notion
  • Use Notions public API
  • Profit!
  • Now I'm just writing placeholder content to try out the different blocks available. How about a link, bold text, strikethrough text, italic text and code? Colored text?

    🎉 Source code

    Get the source code at my github repo: https://github.com/samuelkraft/notion-blog-nextjs

    🤔 What about a fancy table block?

    The notion API only supports a couple of basic text-like blocks as specified in their documentation

    Supported blocks:

    Heading 1

    Heading 2

    Heading 3


  • bulleted list 1
  • bulleted list 2
  • bulleted list 3
  • numbered list 1
  • numbered list 2
  • numbered list 3
  • What is this?

    It's the children of a toggle!

    A simple quote block
    export const getDatabase = async (databaseId) => {
      const response = await notion.databases.query({
        database_id: databaseId,
      return response.results;
    📎 Screenshot_2022-01-25_at_20.59.33.png

    Sub-page (1)

    External Image
    External Image
    Notion-hosted image
    Notion-hosted image


    To edit a block change the renderBlock function in [id].js


    ← Go home