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;
};
Customizing
To edit a block change the
renderBlock function in [id].jsĀ
āļø