Notion API를 이용해 정적 블로그 배포하기

들어가며

1️⃣ SSR을 사용하지 않고, SSG를 사용하는 이유?

2️⃣ Notion 페이지를 어떤 방식으로 렌더링 했을까?

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

const notionClient = new Client({
  auth: process.env.NOTION_SECRET,
});

const result = await notionOfficialClient.databases.query({
    database_id,
  }); 
 //result에는 database내의 page id값을 알 수 있다.

• NOTION_SECRET값은 아래 노션으로 설정한 API Integration을 사용하여 설정할 수 있습니다.

Your connected workspace for wiki, docs & projects | Notion

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

https://www.notion.so/profile/integrations

import { NotionAPI } from "notion-client";

const notionClient = new NotionAPI();

const recordMap = await notionClient.getPage(pageId);

import { getPageProperty } from "notion-utils";

export const notionClient = new NotionAPI({
  authToken: process.env.NOTION_TOKEN_V2,
  activeUser: process.env.NOTION_USER_ID,
}); // Collection 데이터를 불러오기 위해선 인증이 필요하다.

//...

const title = getPageTitle(recordMap);
const description = getPageProperty("설명", recordMap.block[pageId]?.value, recordMap);

import "react-notion-x/src/styles.css";
import "prismjs/themes/prism-tomorrow.css";
import "katex/dist/katex.min.css";
import { NotionRenderer } from "react-notion-x";

//...
<NotionRenderer
        disableHeader
        recordMap={recordMap}
        fullPage={true}
        darkMode={false}
        components={{
          // 원하는 컴포넌트로 Custom 가능.
        }}
      />

3️⃣ 구현하는 과정에서 만났던 챌린지들

export const notionClient = new NotionAPI({
  authToken: process.env.NOTION_TOKEN_V2,
  activeUser: process.env.NOTION_USER_ID,
});

<NotionRenderer
        mapImageUrl={(url, block) => {
          const signedUrl = recordMap.signed_urls?.[block.id];
          return signedUrl || url;
        }}
      />

4️⃣ 마지막으로.. 정적 페이지 배포에 대한 소회