Using Notion as CMS for NextJS Blog

Note: This is an AI generated post. A different approach is used to setup Notion as CMS. The problem with the steps below is that, the Database ID is somewhat converted to a different format that’s why connection always fail. If you will browse the source code, you’ll see that approach used. Thru a script that creates the database in notion, it will also manage the connection instead of manually creating the database in Notion.

Introduction

Content management is a critical aspect of maintaining any blog or content-focused website. Traditional CMSs often come with their own hosting requirements, complex setup processes, and learning curves. What if you could use a tool you're already familiar with—one that's designed for writing and organizing content? Enter Notion, the all-in-one workspace that's gained immense popularity for its flexibility and ease of use. In this guide, we'll explore how to transform Notion into a powerful headless CMS for your Next.js blog, giving you the best of both worlds: a familiar, user-friendly interface for content creation and a blazing-fast, SEO-friendly website powered by Next.js.

Why Use Notion as a CMS?

Before diving into the implementation details, let's consider why Notion makes an excellent choice for a headless CMS:

1. Familiar writing experience: If you're already using Notion, there's no new interface to learn.
2. Rich text editing: Notion provides a powerful editor with support for headings, lists, tables, code blocks, and more.
3. Content organization: Use Notion's database features to categorize, filter, and sort your content.
4. Collaboration: Invite team members to contribute to your content with Notion's robust permission system.
5. No additional hosting costs: Your content lives in Notion, which you're likely already paying for (or using the free tier).
6. Version history: Notion automatically tracks changes to your content.

Setting Up Notion as CMS

Step 1: Create a Notion Integration

First, you'll need to create a Notion integration to access your content programmatically:

1. Go to https://www.notion.so/my-integrations
2. Click "New integration"
3. Name your integration (e.g., "Blog CMS")
4. Select the workspace where you'll create your blog database
5. Click "Submit"
6. Copy the "Internal Integration Token" (this will be your NOTION_API_KEY)

Step 2: Create a Notion Database for Blog Posts

Next, you'll need to create a structured database to store your blog posts:

1. In Notion, create a new page
2. Add a new database (full page)
3. Set up the following properties:
   • Title (Title type) - for the blog post title
   • Slug (Text type) - for the URL slug
   • PublishedDate (Date type) - for the publication date
   • Summary (Text type) - for the blog post summary
   • Tags (Multi-select type) - for categorizing posts
   • Status (Status type) - with options like "Published", "Draft", etc.
   • Author (Person type) - to attribute posts to specific authors
4. In the Ellipsis menu button, click on connection and select the integration name
5. Get your database ID:
   • Open your database in a browser
   • Copy the ID from the URL: https://www.notion.so/workspace/[DATABASE_ID]?v=...
   • This will be your NOTION_DATABASE_ID

Step 3: Configure Environment Variables

Create a .env.local file in your Next.js project root and add your Notion API credentials:

NOTION_API_KEY=your_notion_api_key_here
NOTION_DATABASE_ID=your_notion_database_id_here