Building a personal blog with Next.js and Notion

#notion #nextjs #cms #seo

In this article, we will together build the fastest blog for yourself with Next.js and Notion.

I. Prerequisites

Notion is certainly no stranger to everyone. It is an AI-powered workspace that helps users easily plan, take notes, and integrate with many other applications, making it very convenient.

In terms of the idea, we will use Notion as a CMS to manage post information, and Next.js to display that information for users while leveraging SSR to improve SEO and security.

Knowledge of Next.js
Personal Notion account

II. Create a database and access token in Notion

Select a page in Notion to store the database.
Add a new element and choose Database - Full page:
Create the following fields for the database, specifying their type and purpose as follows (these fields are for demo purposes, you can modify them later):
- Title: Already created as Name, change it to Title
- Tags (Multi-select): Topic tags
- Description (Text): Brief description of the post
- PresentativeMedia (Files & media): To store the featured image for the post
- Slug (Text): Used as the post's URL
- Status (Status): Post status, including Draft, Published
Next, you can access notion-integration to generate a secret token linked to your personal Notion account, which will be used to create the above database. Remember to select only the Read permission: Read content, as shown in the image below:
After creating the notion-integration, the next step is to allow this integration to access the database. In the Connect to section, choose the integration you just created (I just created for-show-sample), as shown in the image below:

III. Create sample records in database

Based on the created database structure, we will create some sample records as follows. Note that the status of the posts should be changed to Published.

IV. Using notion-nextjs-mini-kit

You can follow the instructions to clone and run the NextJs source code on your machine here.
As per the installation instructions, you will need to replace 2 environment variables.
NOTION_TOKEN= NOTION_DATABASE_ID=
With:
- The Notion token is the token generated from Step II.
- To get the database ID from the database we created, simply open the database page in the browser and copy the string as shown in the image.
Run the NextJs application above and you will see the results as follows

V. Create content for the page

Create content for the pages based on the data created in the previous database.
Publish the posts (select share -> publish)
Return to our website, click on one of the previous posts to see the results 🎉

VI. Conclusion

References

notion-nextjs-mini-kit: https://github.com/khaaleoo/notion-nextjs-mini-kit

On this guide, I have shown you how to quickly create a personal blog using NextJs and Notion as a database. If you have any questions or contributions, please leave a comment below. Thank you everyone.

Happy coding! 🙌🏻

Top comments (9)

Mark Leo • Jan 26 '25

Hi,
I want to use Slate.js to display/edit the Notion Page content(notion blocks),
but the notion-api returns many kinds block content so, such as existing editor(like slate.js) can not editor all the contents of notion block?
Could you tell me how do they connect?

Le Xuan Kha (Leo) • Jul 5

It's read-only rendering, not editing — Slate never touches Notion blocks. The flow: fetch blocks recursively via the Notion API, map each block's type to a component (paragraph→p, heading_1→h1, code→highlighted block, etc.), and render unmapped types as null/a fallback instead of crashing. You never need 100% block-type coverage.

If you want to load this into Slate for editing, same idea: only define Slate elements for the block types you actually support (paragraphs, headings, lists, quote, code, image, callout, to-do are the easy ones), write one deserializer per block, and treat anything else as a read-only "void" element rather than chasing full fidelity. Writing changes back to Notion is a separate, harder problem — the API has limited write support for several block types, so full bidirectional sync has real ceilings today.

(Side note: I just opened a PR replacing the unofficial notion-api.splitbee.io endpoint in the mini-kit with the official @notionhq/client — typed, documented block schemas make this deserializer approach much easier to build on.)