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?
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Ā
āļø