How to use Notion for your Next.js blog

This blog post is pretty meta.

I am using our new Notion Content Management System (CMS) to tell you how to build one yourself.

Initially, we were manually writing each blog post entry to the website. Painful, I know.

Manually typing a div for every paragraph (yikes)

We wanted something more dynamic. So we thought to ourselves, let’s host the blog posts in a Notion database and render them on our website in the format we wanted.

This way, we could continually make changes to our blog posts, publish more frequently and also allow non-technical folks to write to the website.

Moreover, if we wanted to change up the styling in the future, it would be very easy to do so.

Convinced by the return on investment of this effort, I set out to achieve this in less than 1 day.

For context, I have some programming knowledge but I am a beginner by all measures.

Eventually, it took me about 8 hours of productive work to implement this. But with the resources I am sharing below, I am sure you’ll be able to do it in much less time.

Ok, let’s jump into it.

Create an integration in the Notion app. Here are the official API docs to get started.

At the end of the process, copy the “Internal Integration Token” and store it in a safe place.

This token allows you to communicate from the web app to the integration.

Create a page in your Notion workspace where you will be storing all your blog entries.

Give access to the integration you created by clicking “Share” on the Notion page.

Now you’re all set to fetch some data from your web app.

Set up an integration for your blog

I’d recommend watching Lee Robinson’s Youtube tutorial on this.

I’d say watch from 16:00 → 26:00 for optimum value.

If you’re new to Next.js, you can watch the rest of the video on how to set up and deploy a Next.js project.

Pro-tip: Use an older version of the Notion API (1.0.4 or lower). The new 2.0.0 API has a breaking change to the querying logic. Their team is working on a fix. Until then, you’re all good to use an older version of the API.

This is by far the hardest part of this project.

Notion’s API returns every single block as a separate object.

Each object has a different type, could be text, image, to-do list, etc. Each object needs unique CSS properties to render correctly.

I was too lazy to manually do this so I used boilerplate code from this amazing template by Samuelkraft. If you’re looking for a quick hack, you could also clone this repo directly and work off of it.

I was trying to teach myself so I went through the entire learning process.

My goal for this guide was to collect resources that someone in my position would find useful.

This post is a work in progress, so if you have any feedback, email me at sarim@neat.run. I’d love to continuously improve this using the Notion CMS *wink*.