개요

1. 내가 Notion에 작성한 그대로의 표현이 되지 않는다.
1. Notion은 대체로 마크다운을 따르지만, Notion만의 특수한 기호가 추가되어있어 (블록 > 등) 대부분의 마크다운 뷰어에서의 표현이 Notion 뷰어에서의 표현과 다릅니다.

2. 매번 Notion 에 글을 쓰고 다른 블로그에 복사 붙여넣기 하는 것은 여러모로 불편하다.
1. 일일이 복붙하고 깨진 글을 정리해주어야하며, Notion에 작성한 글을 수정하면, 블로그 글에도 수정해주어야한다.

Notion API 를 사용가능하게 만들기

1. Notion API Key 를 받아야합니다.

2. 연동하고 싶은 개인 Notion 페이지를 공개해야합니다.

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

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/my-integrations

Next.js 프로젝트에 적용

  "dependencies": {
    "@notionhq/client": "^2.2.15",
    "next": "14.2.2",
    "notion-client": "^6.16.0"
    "react-notion-x": "^6.16.0",
    //...others
  },

1. @notionhq/client
1. v1 API 를 호출할 때 사용하는 클라이언트 라이브러리 입니다. (구체적인 엔드포인트는 api.notion.com/v1)
2. 꾸준히 관리되고있습니다. (24년 4월까지 변경사항을 올라온 것을 확인했습니다.)
3. 데이터베이스의 데이터들을 filter, sort 해서 가져올 때 사용했습니다.
4. docs 주소
Notion API Overview

https://developers.notion.com/docs/getting-started

2. react-notion-x & notion-client
1. v3 API 를 호출할 때 사용하는 클라이언트 라이브러리 입니다. (구체적인 엔드포인트는 www.notion.so/api/v3)
2. react 관련 프로젝트에서 손쉽게 사용할 수 있도록 만든 라이브러리 입니다.
3. 관리가 원활히 되고있지 않습니다. (최근 커밋 8개월 전)
4. Notion 의 마크다운을 그대로 표현할 수 있는 컴포넌트를 사용하기 위해 사용했습니다.
5. docs 주소
react-notion-x
NotionX • Updated Oct 16, 2024

1. @notionhq/client 내부 서비스 사용하기

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

const notionToken = process.env.NOTION_KEY;
const notionDatabaseId = process.env.NOTION_DATABASE_ID;

const notion = new Client({
  auth: notionToken,
});

export async function getPosts() {
  const response = await notion.databases.query({
    database_id: notionDatabaseId as string,
    filter: {
      property: "상태",
      status: {
        equals: "공개",
      },
    },
    sorts: [
      {
        property: "날짜",
        direction: "descending",
      },
    ],
  });

  return response.results as DatabaseObjectResponse[];
}

export async function getDatabaseTags() {
  const response = await notion.databases.retrieve({
    database_id: notionDatabaseId as string,
  });

  const tags = (response as any).properties["Tags"].multi_select.options;

  return tags as Tag[];
}

1. @notionhq/client 서비스 세팅
• Client 클래스를 사용해야합니다. auth 는 필수로 들어가야합니다.
• 환경변수인 NOTION_KEY 는 아까 API 통합에서 복사해놓은 시크릿 키 입니다.
• 환경변수인 NOTION_DATABASE_ID 는 데이터베이스의 ID 입니다.



다음과 같이 데이터베이스를 전체 페이지로 열고 들어가면 나오는 링크의 뒤에 복잡한 코드가 데이터베이스의 ID 입니다.



 
2. getPosts 는 제가 지정한 데이터베이스에서 원하는 row 를 쿼리해오는 서비스입니다.
1. 쿼리는 데이터베이스의 상태 컬럼이 공개인 것을 날짜 최신순으로 가져오도록 합니다.
2. 이 서비스는 v3 버전에서도 비슷한게 있지만, 쿼리가 이 API 처럼 객체로 받는 것이 아니라 string 형태로 받습니다. 근데 어떻게 사용해야하는지 docs 에 자세히 나오지 않아요. 그래서 만약 복잡한 쿼리를 해야한다면, v1 버전을 사용하시는 것을 추천드립니다.
3. getDatabaseTags 는 제가 지정한 데이터베이스에서 특정한 태그들의 종류를 가져오는 서비스 입니다.
1. 구현된 라이브러리의 type 과 실제 response 가 다른 상황입니다. 직접 console.log 로 찍어보면서 값을 찾았습니다.
 

2. notion-client 내부 서비스 사용하기

import { DatabaseObjectResponse } from "@notionhq/client/build/src/api-endpoints";
import { NotionAPI } from "notion-client";

const notionUser = process.env.NOTION_USER_ID;
const notionTokenv2 = process.env.NOTION_TOKEN_V2;

const notionApi = new NotionAPI({
  activeUser: notionUser,
  authToken: notionTokenv2,
});

export async function getPage(id: string) {
  const response = await notionApi.getPage(id);

  return response;
}

1. react-notion-x & notion-client 서비스 세팅
• NotionAPI 클래스를 사용해야합니다. 페이지 정보만 가져오는 경우에는 반드시 activeUser , authToken 이 필요한 것은 아닙니다.
• 환경변수 NOTION_USER_ID , NOTION_TOKEN_V2 는 Notion 페이지에서 개발자도구 → Application 탭 → cookies 에서 www.notion.so 쿠키를 확인하고,





두 값을 확인해 복사 붙여넣기 하시면 됩니다.
 
2. getPage 서비스는 특정 페이지의 ExpandedRecordMap 객체를 return 해줍니다. 이 서비스의 response 를 통해서 NotionRenderer 라는 컴포넌트에 해당 객체를 넘기기만 하면 화면이 보여집니다.
 

3. react-notion-x 를 통해 노션 마크다운을 제대로 렌더링 하기

"use client";

import Image from "next/image";
import { NotionRenderer } from "react-notion-x";
import { Code } from "react-notion-x/build/third-party/code";
import { Collection } from "react-notion-x/build/third-party/collection";
import { ExtendedRecordMap } from "notion-types";
import "react-notion-x/src/styles.css";

const ClientNotionRenderer = ({
  recordMap,
}: {
  recordMap: ExtendedRecordMap;
}) => {
  return (
    <NotionRenderer
      recordMap={recordMap}
      components={{
        nextImage: Image,
        Code: Code,
        Collection: Collection,
      }}
      fullPage={true}
      darkMode={false}
      disableHeader
    />
  );
};

export default ClientNotionRenderer;

components 속성에 필요한 컴포넌트를 추가해 주어야합니다. 표현하고자 하는 페이지가 Code 블록을 사용한다면, Code 컴포넌트를 추가해야하고, Collection (데이터베이스나 이런것들) 을 사용한다면 Collection 컴포넌트를 추가해야합니다. 해당 페이지를 불러올 때, 경고 콘솔이 뜨기 때문에 확인하기 용이합니다.
NotionRenderer 컴포넌트는 내부적으로 Web API 인 intersection-observer api 를 사용하고 있어, 서버에서 렌더링이 불가능 합니다. (서버 컴포넌트로 렌더하려고 하면 에러남) 그래서 클라이언트 컴포넌트로 만들고, 컴포넌트 트리 최하위 노드로 빼서 사용하고 있습니다.

import ClientNotionRenderer from "@/components/posts/ClientNotionRenderer";
import { getPage } from "@/services/notion";

type PostDetailPageProps = {
  params: { postId: string };
};

export default async function PostDetailPage({ params }: PostDetailPageProps) {
  const pageRecordMap = await getPage(params.postId);

  return <ClientNotionRenderer recordMap={pageRecordMap} />;
}

마무리