Hello world!

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

Paragraph

bulleted list 1

bulleted list 2

bulleted list 3

numbered list 1

numbered list 2

numbered list 3

Buy milk

Make a Next.js Notion blog

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

67.4KB

Sub-page

Customizing

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

✌️

Last edit： 2022-07-31 00:35:00