Notion Next Blog a modern blogging platform powered by Notion as a headless CMS, built using Next.js App Router. It enables you to manage content directly from Notion while leveraging the performance, scalability, and developer experience of Next.js.
- ✍️ Write in Notion, Publish on the Web: A superior writing experience using Notion as your sole CMS. Write, edit, and manage post statuses (
Published,Draft) directly from your Notion database. - 🚀 Modern Architecture: Built with Next.js 14+ (App Router) and React Server Components, ensuring incredibly fast rendering performance.
- 🎨 Elegant & Responsive Design: A clean and readable layout thanks to Tailwind CSS and professional typography styling from
@tailwindcss/typography. - 🌗 Light & Dark Mode: A comfortable reading experience anytime with a seamless Light/Dark mode toggle, powered by
next-themes. - ⚡️ Static Performance: Post and category pages are statically generated (SSG) at build time, making them feel instant to your readers.
- 🗂️ Category & Relation System:
- Dynamically displays a list of unique categories based on your posts.
- Allows visitors to browse posts by category.
- Supports database relations, ideal for linking posts to an Authors database.
- 📄 Smart Pagination: Functional "Next" and "Previous" navigation on archive pages to handle a large number of posts.
- 🖼️ Automatic Image Optimization: Images hosted in Notion are automatically optimized by
next/imagefor faster load times.
- Next.js – React Framework
- Notion – CMS / Database
- Tailwind CSS – CSS Framework
@notionhq/client– Official Notion SDKnotion-to-md– Converts Notion content to Markdownnext-themes– For Dark Mode functionality@heroicons/react– SVG Icons
Follow the steps below to deploy and configure this blogging platform for your personal use.
- Node.js (v18.17 or later)
- A Notion account
git clone [https://github.com/damaisme/notion-next-blog.git](https://github.com/damaisme/notion-next-blog.git)
cd notion-next-blognpm install
# or
yarn install
# or
pnpm installThis is the most critical step to connect the platform to your content.
- Duplicate the Notion Template: If you don't have one already, duplicate a blog database template into your Notion workspace.
- Create a Notion Integration:
- Go to the Notion integrations page.
- Click "New integration," give it a name (e.g., "My Blog Platform"), and select the appropriate workspace.
- Copy your "Internal Integration Token". This is your NOTION_API_KEY.
- Get Your Database ID (Settings, Author and Post Database):
- Open your Posts database in Notion.
- Click the three-dot menu (...) > "View Database".
- From the link https://www.notion.so/YOUR_WORKSPACE/DATABASE_ID?v=..., copy your DATABASE_ID.
- Connect the Integration to Your Database:
- Go back to your database page in Notion, click the three-dot menu (...) > "Add connections" > then select the integration you just created.
Create a .env.local file in the project root.
.env.local
NOTION_SECRET=secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxx
NOTION_POST_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NOTION_SETTING_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NOTION_AUTHOR_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REVALIDATE_SECRET=best-secret
Replace the placeholder values with your token and database ID.
npm run devOpen http://localhost:3000 in your browser to see your platform running with content from your Notion workspace.
Notion Property Names Ensure the property names in the lib/notion.js file match the property names in your Notion database exactly (e.g., Status, Slug, Publish Date, Category).
This project supports manual content revalidation using a secure API endpoint. It's useful when you're using Notion as a headless CMS and want to instantly reflect content updates without waiting for the revalidation interval to expire.
📌 Endpoint
< 71D2 /a>GET /api/revalidate?secret=YOUR_SECRETExample (local development):
http://localhost:3000/api/revalidate?secret=testrevalidate
To protect this endpoint, it requires a secret query parameter. Make sure the secret matches the value of REVALIDATE_SECRET in your .env.local file:
REVALIDATE_SECRET=testrevalidatecurl -X POST "http://localhost:3000/api/revalidate?secret=testrevalidate" \
-H "Content-Type: application/json" \
-d '{"slug": "my-notion-post"}'{
"revalidated": true,
}This platform is designed to be easily deployed with Vercel.
- Push your code to a GitHub repository.
- Import your project on Vercel from the GitHub repository.
- Add your Environment Variables (NOTION_API_KEY and NOTION_DATABASE_ID) in the Vercel project settings. Deploy! Your site will be live.