Next.js Notion Blog Template

A modern, customizable Next.js boilerplate for creating a blog powered by Notion as a CMS. Perfect for developers who want to leverage Notion's powerful content management while maintaining full control over their blog's design and functionality.

Live Demo

Quick Start

This template provides everything you need to get started with a Notion-powered blog in minutes.

Features

• Notion as CMS: Use Notion as your content management system
• Fully Customizable: Complete control over design and UI components
• Next.js 16: Latest Next.js with App Router and React 19
• Responsive Design: Mobile-first, responsive layout
• Dark Mode: Built-in dark mode support
• SEO Ready: Optimized for search engines
• Performance: Fast loading with optimized rendering
• Rich Content: Support for all Notion block types
• Direct Links: Easy navigation between pages

Setup Instructions

1. Fork and Clone

# Fork this repository on GitHub first, then clone your fork
git clone https://github.com/YOUR_USERNAME/nextjs-notion-blog-template.git
cd nextjs-notion-blog-template

# Install dependencies
bun install
# or
npm install
# or
pnpm install

2. Create Notion Integration

1. Go to https://www.notion.so/profile/integrations
2. Click "New integration"
3. Give it a name (e.g., "My Blog CMS")
4. Select the workspace you want to access
5. Click "Submit"
6. Copy the "Internal Integration Token" (starts with ntn_)

3. Configure Environment

# Copy the environment example
cp .env.example .env.local

Edit .env.local and add your Notion token:

NOTION_TOKEN=ntn_your_actual_token_here

4. Grant Access to Your Notion Pages

To allow your integration to access specific pages:

1. Go back to your integration at https://www.notion.so/profile/integrations
2. Click on your integration name
3. Go to the "Access" tab
4. Click "Add pages" or "Add databases"
5. Search for and select the pages/databases you want to display on your blog
6. Click "Save"

5. Run the Development Server

bun run dev
# or
npm run dev
# or
pnpm dev

Open http://localhost:3000 to see your blog!

📖 Learn More

• Next.js Documentation
• Notion API Documentation
• Notion API Working with Page Content