NextJS Blog using the Notion API

The simplest Blog with Notion as a CMS and NextJS with only 3 dependencies!

Getting Started

Setup Notion (see blog post tutorial)
Copy .env.example file to .env.local and add your Notion API secret token and database ID

and then run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

List of blog posts from Notion Database
Page content from Notion
Blog post metadata (date, author, tags)
Incremental Static Regeneration
NextJS API endpoints (useful if you want to consume the same data from other apps), both dynamic and static fetching of content
Pagination
Search
Filter by tags
Advanced content parsing (Notion Blocks)

Deploy the example using Vercel:

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
components		components
data		data
docs		docs
pages		pages
public		public
styles		styles
utils		utils
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
next.config.js		next.config.js
package.json		package.json
yarn.lock		yarn.lock