Powered by Notion and Next.js
2023-01-14
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?
- 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?
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
- bulleted list 1
- bulleted list 2
- bulleted list 3
- numbered list 1
- numbered list 2
- numbered list 3
- [ ] Buy milk
- [x] 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
Sub-page
This is a sub-page
Customizing
To edit a block change the renderBlock
function in [id].js
✌️