Notion을 CMS처럼 활용해서 블로그 연결하기

개발자가 아닌 사람도 글을 올릴 수 있게 하려면?
디자인도 예쁘고, 에디터도 직관적인 Notion을 CMS처럼 연결해보는 건 어떨까요?

이번 글에서는 Notion API를 통해 Notion에 작성한 글을 Next.js 블로그에 자동으로 연결하는 방법을 소개할게요.

---

🔧 1. Notion 통합(Integration) 생성

1. Notion 개발자 페이지에서 새 Integration 생성
2. Internal Integration Token 발급 → 저장
3. CMS로 사용할 Notion 데이터베이스 페이지 생성
4. 해당 페이지 → “공유” → 만든 Integration에 권한 부여

---

📑 2. 데이터베이스 구조 만들기

Notion에서 아래와 같은 컬럼을 가진 DB를 생성합니다:

• Title: 글 제목 (제목 타입)
• Slug: URL용 고유 문자열
• Published: 체크박스
• Date: 게시일
• Content: 본문 (별도 Notion 페이지로)

이 데이터베이스의 Database ID도 추출해 저장해둡니다 (URL에서 확인 가능).

---

📦 3. Notion SDK 설치 및 설정

npm install @notionhq/client

// lib/notion.ts
import { Client } from '@notionhq/client';

export const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const databaseId = process.env.NOTION_DATABASE_ID!;

주의: .env.local에 환경변수 추가:

NOTION_TOKEN=secret_xxxxxxx
NOTION_DATABASE_ID=xxxxxxxxxxxxxxxx

---

📥 4. 포스트 목록 불러오기

// lib/posts.ts
import { notion, databaseId } from './notion';

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

  return response.results.map((page) => ({
    id: page.id,
    title: page.properties.Title.title[0].plain_text,
    slug: page.properties.Slug.rich_text[0].plain_text,
  }));
}

---

📄 5. 상세 페이지 렌더링

글 본문은 Notion Blocks API로 가져와야 해요.

export async function getPostContent(pageId: string) {
  const blocks = await notion.blocks.children.list({
    block_id: pageId,
  });

  return blocks.results;
}

그 후, Paragraph, Heading 등 타입별로 분기해 렌더링하면 OK!

// 간단한 렌더러 예시
{content.map((block) => {
  if (block.type === 'paragraph') {
    return <p key={block.id}>{block.paragraph.text[0]?.plain_text}</p>;
  }
})}

---

🌐 6. 블로그에 자동 반영

Notion에서 글을 “Published” 체크만 하면 바로 블로그에 반영되도록 getStaticProps나 ISR를 활용할 수 있어요.

export async function getStaticProps() {
  const posts = await getPosts();
  return {
    props: { posts },
    revalidate: 60, // 1분마다 새로 고침
  };
}

---

✅ 마무리하며

이제 Notion에서 글을 쓰고 체크만 하면
자동으로 블로그에 반영되는 “CMS 없는 CMS” 워크플로우가 완성됐습니다.

디자인, 에디팅, 협업까지 모두 갖춘 **최고의 간편 블로그 작성 환경**이죠.

“내 블로그의 백오피스, 이젠 노션으로 충분해.”