react-notion을 활용해 Notion에 작성한 포트폴리오 페이지의 내용을 Next.js 프로젝트에 적용해보자.
Notion에서 데이터 받아오기
https://notion-api.splitbee.io/v1/pagenotion-api-worker를 사용하면 공개된 페이지인 경우 간단하게 데이터를 받아올 수 있다.- 주소창에 입력해보면 아래와 같은 결과를 얻을 수 있다.
// 20230303202117
// https://notion-api.splitbee.io/v1/page
{
"error": "Route not found!",
"routes": [
"/v1/page/:pageId",
"/v1/table/:pageId",
"/v1/user/:pageId"
]
}- 대충 page, table, user type에 따라 데이터를 받아올 수 있고, pageId만 잘 넣어주면 된다는 뜻.
Notion 페이지의 pageId 받아오기
- 가져올 페이지의 공유 설정을 다음과 같이 공개로 바꿔주고 생성된 링크에서
pageId를 얻을 수 있다.
https://aseungbo.notion.site/James-An-14304e546f5047cba2f0a02d8b2c77cd14304e546f5047cba2f0a02d8b2c77cd이 부분이pageId가 된다.
notion-api-worker
https://notion-api.splitbee.io/v1/page/14304e546f5047cba2f0a02d8b2c77cd
- 응답받은 데이터를 살펴보면, Notion에 작성했던 내용들이 보인다.
- 해당 데이터를 직접 가공하고, 스타일링해서 사용해도 무방하지만,
react-notion를 활용해서 쉽게날먹해보자
react-notion
Installation
npm install react-notionUsage
- Next.js 13 버전에 맞춰 기존 SSG, SSR 함수가 아닌
fetch를 사용했다.
/app/page.tsx
import { NotionRenderer } from "react-notion";
import "react-notion/src/styles.css";
async function fetchNotion() {
const notionResponse = await fetch(
"https://notion-api.splitbee.io/v1/page/14304e546f5047cba2f0a02d8b2c77cd",
{
// cache: "force-cache", // SSG
cache: "no-store", // SSR
// next: {
// revalidate: 10, // ISR
// },
}
);
console.log(notionResponse);
if (!notionResponse.ok) {
throw new Error("Failed to fetch data");
}
return notionResponse.json();
}
export default async function Home() {
const notion = await fetchNotion();
return (
<main>
<NotionRenderer blockMap={notion} />
</main>
);
}Result
react-notion의NotionRenderer와styles.css를 통해 Notion 페이지와 동일한 형태로 렌더링되는 걸 볼 수 있다.- Notion 페이지를 여러 부분으로 나누면 필요한 내용만 가져다 쓸 수도 있을 것 같다.
(Notion component...?) - 다음은 Notion 페이지를 수정할 때마다 next에서 해당 페이지를 주기적으로 갱신하는 방법에 대해 알아봐야겠다.
Reference
born 2 code :)