Create a blog with NextJS and Notion as a CMS

Integrate the new Notion API with the NextJS framework

Alex Karadimos
9 min readJun 26, 2021

--

TL;DR

Visit my repository with the code at https://github.com/karadalex/nextjs-notion-blog, give it a star and if you feel generous please give some claps to this post 🤩

Introduction

The last few months I have been using notion.so note taking app for almost anything (taking notes, writing lists, tasks, organizing content and ideas and much more). Recently notion released a beta version of their API and I immediately thought of so many cool projects that could use notion as a backend. The greatest use-case, which obviously all of you have thought of before me, is using the Notion API to get content for a blog post and then using the Notion app as a cms. Personally I think that the combination of this API with NextJS is the best stack to quickly and easily create, deploy, maintain this blog and write content for it (a developer will barely be needed if this project is already deployed on Vercel 🤯).

Setup Next.js project

Setup a simple next.js project using the Bootstrap template

create-next-app my-blog --template bootstrap

edit next.config.js and on domains add all the domains where your images are stored, in this case all images are from unsplash.com

module.exports = {
images: {
domains: ['images.unsplash.com'],
},
}

Create list of blog posts with dummy data

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import posts from "../data/posts"
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Blog</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to my <a href="#">Blog</a>
</h1>
<p className={styles.description}>
Powered by the
<code className={styles.code}>Notion API</code>
</p>
<div

--

--

Alex Karadimos

Electrical and Computer Engineer | Full Stack Web Developer, Robotics, Blockchain