[포트폴리오] 프로젝트 상세 페이지 구현: react-notion-x를 활용한 렌더링

처음엔 Notion API를 사용해 Page나 Block Data를 얻고, CustomRenderer를 구현해 프로젝트 상세 페이지를 구현할 생각이었습니다. 하지만 CSS에 많은 리소스가 투자될 것 같아 외부 라이브러리를 사용하기로 결정했습니다.

React Notion X

react-notion-x를 사용하면 복잡한 구현 없이 쉽게 공유된 페이지를 렌더링 할 수 있습니다. react-notion-x 에 접속하면 더 많은 정보를 확인할 수 있습니다.

해당 라이브러리는 CSR방식으로 작동합니다. CSR로 작동하는 컴포넌트를 만들고 SSR로 작동하는 프로젝트 상세 페이지에 포함시킵니다.

// Renderer.tsx
"use client";
import { NotionRenderer } from "react-notion-x";
// core styles shared by all of react-notion-x (required)
import "react-notion-x/src/styles.css";

interface RendererProps {
  recordMap: any;
}

export const Renderer = ({ recordMap}: RendererProps) => {
  return (
    <div>
      <NotionRenderer recordMap={recordMap}/>
    </div>
  );
};

export default Renderer;

이전에 Notion API를 통해 받은 response에 id값이 여기에서 사용하는 pageId입니다. 각 pageId에 대해 고유한 페이지를 동적으로 생성하고, 해당 페이지의 Notion 데이터를 렌더링합니다.

// src/app/project/[pageId]/page.tsx
import Renderer from "@/components/notion/Renderer";
import { NotionAPI } from 'notion-client';

const notion = new NotionAPI();

interface NotionPageProps {
  pageId: string;
}

export default async function ProjectDetailPage( {pageId}: NotionPageProps) {
  const recordMap = await notion.getPage(pageId);
  return (
    <main>
      <Renderer recordMap={recordMap}/>
    </main>
  );
}