Notion Blog with Next.js 13

Contents

• Introduction
• Demo
• Features
• Major Dependencies
• Getting Started
• Screenshots
• TODO

🚀 Introduction

This is a blog template that uses Notion as CMS.
Upload posts in Notion, share them through your blog!
This project uses App Router that is now stable in Next.js 13.4.

👀 Demo

Check out the demo site HERE

https://www.youtube.com/watch?v=rZgh8a4ZjA8

🌟 Features

• Simple to sync Notion and blog
• Search posts by name
• Filter posts by categories
• Related posts
• Dark mode
• Responsive design
• Sitemap

📦 Major Package Dependencies

• react-notion-x: Renderer for notion pages
• notion-client: Unofficial Notion API which is much faster than official Notion API

🏁 Getting Started

1. Duplicate this notion blog template to your notion workspace. (Make your notion page public.)

   

2. Visit your notion page with browser.

3. Check your database id in the url. (needed as an environment variable)

   

4. Check your auth token in the cookie. (needed as an environment variable)

   

5. Now you can run on local or deploy to Vercel with environment variables listed below.

Slug should be unique because it's used as url of the post page

Environment Variables

NOTION_DATABASE_ID: getting started step 3
NOTION_AUTH_TOKEN: getting started step 4
SITE_URL: URL of your site (http://localhost:3000 in local environment)
API_KEY: Choose your own password for route handler

Screenshots

Desktop

Tablet

Mobile

📝 TODO

• Light mode for code block