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?

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?

Copy of Test table

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

Paragraph

Colored Block

A simple quote block

export const getDatabase = async (databaseId) => {
  const response = await notion.databases.query({
    database_id: databaseId,
  });
  return response.results;
};

// Code Block with Caption

Sub Page

External Image

Notion-hosted image

Customizing

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

✌️