작고 소중한 블꾸(블로그 꾸미기) 하고싶으신 분..!
잘 찾아오셨습니다
요번 글에서는 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(비공식)를 통해 게시(퍼블릭으로 공개)된 내 노션 페이지에 작성된 내용을 가져오는 라이브러리입니다.
내 노션 페이지 공개하는 방법을 잘 모르겠다? 아래 링크 클릭 후 돌아와주세요
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를 가져와서 코드를 실행해봤더니
요렇게 보입니다 ~ (빨간 글씨는 제가 그림판으로 추가한 글자에요)
저희 이번 글의 목표 잊으신건 아니죠?
1개의 노션 페이지를 NextJS에서 보여주는 코드를 함께 만들어봤습니다
어떤가요 !? 하시다가 어려운 부분이 있으셨다면 댓글로 알려주세용..!
