Building a Notion-powered blog with Next.js

Building a Notion-Powered Blog with Next.js

Why Notion as a CMS

• MDX files — great but means touching the codebase every time I write

• Contentlayer — good but adds complexity

• Sanity / Strapi — overkill for a personal blog

Setting Up the Notion Integration

• Title — Title

• Slug — Text

• Description — Text

• Date — Date

• Published — Checkbox

• Tags — Multi-select

NOTION_API_KEY=your_key_here
NOTION_BLOG_DATABASE_ID=your_database_id_here

Fetching Posts

npm install @notionhq/client@2.2.15

Pin to v2 — v3 restructured the API and breaks things.

import { Client } from '@notionhq/client';

const notion = new Client({ auth: process.env.NOTION_API_KEY });

export async function getBlogPosts() {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_BLOG_DATABASE_ID!,
    filter: { property: 'Published', checkbox: { equals: true } },
    sorts: [{ property: 'Date', direction: 'descending' }],
  });

  return response.results.map((page) => {
    // map properties to a clean BlogPost type
  });
}

Rendering with react-notion-x

npm install react-notion-x notion-client prismjs

'use client';

import { NotionRenderer } from 'react-notion-x';
import dynamic from 'next/dynamic';

const Code = dynamic(() =>
  import('react-notion-x/build/third-party/code').then((m) => m.Code)
);

export default function NotionContent({ recordMap }) {
  return (
    <NotionRenderer
      recordMap={recordMap}
      fullPage={false}
      darkMode={true}
      disableHeader={true}
      components={{ Collection: () => null, Code }}
    />
  );
}

Important: notion-client uses the unofficial Notion API, so your pages must be set to public in Notion's share settings.

The Linux Casing Bug

git mv src/components/Activities src/components/activities_temp
git commit -m "chore(): temp rename"
git mv src/components/activities_temp src/components/activities
git commit -m "fix(): lowercase folder names for Linux"
git push origin main

Deploying to Vercel

Result