Notion API로 내 블로그 만들기 (NextJS 15 버전)

작고 소중한 블꾸(블로그 꾸미기) 하고싶으신 분..!

잘 찾아오셨습니다

요번 글에서는 NextJS(15 version) + Notion API를 활용해서 나만의 블로그를 만드는 방법을 A To Z 알려드리겠습니다

CMS는 Content Management System 의 약자 입니다. 웹사이트의 컨텐츠를 관리하는 시스템을 CMS라고 부르는데요.

저희가 만들 NextJS 블로그는

Notion의 페이지로 블로그의 콘텐츠를 관리(업로드, 수정, 삭제)할 수 있는

Notion이라는 서비스를 CMS로 사용하는 웹 블로그 서비스입니다.

Notion 내 블로그 만들기 첫 걸음 !

목표 : 1개의 노션 페이지를 NextJS 웹 서비스 화면에서 똑같이 보여주기

하나의 Notion Page를 저희가 만들 웹 서비스의 화면에 똑같이 보여주려고 합니다.

NextJS 설치하시구요

// NextJS 15 버전 자동 설치 방법
npx create-next-app@latest

// NextJS 15 버전 수동 설치 방법
npm i next@latest react@latest react-dom@latest

// 수동설치시 package.json 파일에 추가해줘야합니다
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

//위 내용을 package.json 파일에 추가해주시고 저장해주세요

// 출처 : https://nextjs.org/docs/app/getting-started/installation

설치가 완료되었다면

app/page.js 파일을 열어주세요 (수동 설치하신분은 app 폴더를 만들고, page.js 파일을 만들어주세요)

아래 코드를 복사해서 붙여넣기 해주시면 됩니다

import { NotionAPI } from "notion-client";
import NotionPageClientComponent from '../components/Page'; 

const notion = new NotionAPI({});

const rootPageId = "당신의 페이지 ";

// 서버에서 데이터 가져오기
async function getNotionData(pageId) {
  try {
    const recordMap = await notion.getPage(pageId);
    return recordMap;
  } catch (error) {
    console.error("Failed to fetch Notion page on server:", error);
    return null;
  }
}

export default async function Home() {
  const recordMap = await getNotionData(rootPageId);
  if (!recordMap) {
    return <div>페이지를 불러오는 데 실패했습니다. 서버 로그를 확인해주세요.</div>;
  }
  return (
    <div>
      <NotionPageClientComponent recordMap={recordMap} rootPageId={rootPageId} />
    </div>
  );
}

6번째 줄에 들어갈 당신의 페이지에 어떤 값을 전달해야하는지 알려드리겠습니다

제가 공개발행한 notion url : “https://www.notion.so/2176c6ef758180c382c2fcefd2fe2495” 에서

“2176c6ef758180c382c2fcefd2fe2495” 이 값 notion.so/뒤에-오는-이-값?만약=물음표가있다면-이부분은-필요없습니다

위의 값(여러분의 페이지 id)을 이렇게 넣어주세요

const rootPageId = "2176c6ef758180c382c2fcefd2fe2495";

위 코드를 실행시키기 위해서 설치해줘야할 2가지 npm 라이브러리가 있습니다

npm i notion-client react-notion-x

바로 1. notion-client 2. react-notion-x 2가지 라이브러리인데요

app/page.js 코드에서 보시면

notion-client는 Notion API(비공식)를 통해 게시(퍼블릭으로 공개)된 내 노션 페이지에 작성된 내용을 가져오는 라이브러리입니다.

내 노션 페이지 공개하는 방법을 잘 모르겠다? 아래 링크 클릭 후 돌아와주세요

노션 페이지 웹사이트 공개 게시 방법 (5초면 끝)

react-notion-x 라이브러리는 뭘 하냐면요.

react-notion-x는 NotionRenderer 라는 컴포넌트를 쓸 수 있게 해줍니다

NotionRenderer는 ‘노션 스타일’의 UI를 그려주는 라이브러리입니다.

앞서 notion-client를 이용해 받아온 데이터 recordMap를 NotionRenderer에 전달하면 끝 !

components 폴더 만들어주시고, 그 밑에 Page.js 작성해주세요 !

components/Page.js 코드

"use client";

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

// 스타일 임포트
import 'react-notion-x/src/styles.css';
import 'prismjs/themes/prism-tomorrow.css';
import 'katex/dist/katex.min.css';

// 동적 컴포넌트
const Code = dynamic(() =>
  import('react-notion-x/build/third-party/code').then((m) => m.Code)
);
const Collection = dynamic(() =>
  import('react-notion-x/build/third-party/collection').then(
    (m) => m.Collection
  )
);
const Equation = dynamic(() =>
  import('react-notion-x/build/third-party/equation').then((m) => m.Equation)
);

const NotionPageClientComponent = ({ recordMap, rootPageId }) => {
  if (!recordMap) {
    // 이 경우는 서버에서 null을 전달했을 때를 대비
    return <div>Notion 데이터를 표시할 수 없습니다.</div>;
  }

  return (
    <div className="notion-container">
      <NotionRenderer
        recordMap={recordMap}
        fullPage={true}
        darkMode={false} // 필요에 따라 true 또는 OS 설정 감지 로직 추가
        rootPageId={rootPageId}
        previewImages={!!recordMap.preview_images}
        components={{
          nextLink: Link,
          Code,
          Collection,
          Equation,
        }}
      />
    </div>
  );
};

export default NotionPageClientComponent;

이렇게 하면 이제 여러분의 사이트가 보이실 거에요 !

제가 공개 발행한 Notion의 주소 https://www.notion.so/2176c6ef758180c382c2fcefd2fe2495 의 페이지 id를 가져와서 코드를 실행해봤더니

요렇게 보입니다 ~ (빨간 글씨는 제가 그림판으로 추가한 글자에요)