Build your blogging website using Next.js and Notions as CMS

After Notion Launched their API it has been easier to use Notion as CMS more and more. In this blog how you can build your own blogging website with all functionalities using Notion as a CMS.

• Write in Notion and enjoy the amazing writing experience of it.
• Save blogs as draft and publish it in your website with a single click.
• Update your blogs is the easiest. Update the blogs in Notion and it will directly reflected to your website within seconds.
• Integrate all of that with your portfolio website.
• Enjoy the speed and SEO with all the customisation you want using Next.js.

There is more but let’s see first how we can build it.

Prerequisite : ⚠️

1. Have node.js installed.
2. We are going to use Tailwind CSS in this tutorial. Although you can use what ever you want.
3. Have some knowledge about Next.js.

Let’s get started . ❇️

Step 1 :

Clone the repo 👇

Step 1 : ⏬

Clean up my personal data and prepare the repo.

Step 2

Install all dependencies :accessibility:

Step 3 ✉️

Add Environment Variables. There is only two variables required to make this work. You already have a .env.local file in your root directory if you have done the Step 1 properly.

Getting the env. 🔍

Head to Notion's Integration Website. Make a new integration and get the secret key from there. That is your NOTION_TOKEN.

Finally it's time to get the NOTION_DATABASE_ID

See the URL of the page. For example https://www.notion.so/rajdeepsengupta/Blogs-cd0db9f8767843ca9563c591a233be5b. Here cd0db9f8767843ca9563c591a233be5b is the database id.

Step 4 🤝

Making Blogs database in notion and connecting them to our blogs website.

For the next env. Make a new page in Notion and make a new database in that.

Add these three column there :

Here is a screenshot of the table and the property names. ⬇️

Make sure to name them exactly this.

Now it is time to connect the page to the Developers App you just built.

Go to Shares of the page and scroll down until you find Connections . Click on Add connections and add your developer app.

Here is a screenshot of where you can find the connections. And then you can add your app you made in this website Notion's Integration Website ⬇️

Step 5 🏃

When all is set, start the server and check using...

And there you go. Start writing blogs now!