Hello everyone, this is my blogpost "Powered by Notion and Next.js"!

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?

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

A simple quote block

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

Sub-page

Customizing

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

✌️