notion page 안에 블럭 데이터 가져와서 html로 변환하기

Nextjs

  • NotionApi
  • markdown

2023-05-03 14:11

// 다이나믹 라우팅 [id].js 에서 page 데이터 가져와서 html로 변환
export async function getStaticProps({ params }) {
  const options = {
    method: "POST",
    headers: {
      accept: "application/json",
      "Notion-Version": "2022-06-28",
      "content-type": "application/json",
      Authorization: `Bearer ${TOKEN}`,
    },
    body: JSON.stringify({
      page_size: 100,
    }),
  };
  const { Client } = require("@notionhq/client");

  const notion = new Client({
    auth: TOKEN,
    notionVersion: "2022-06-28",
  });

  const n2m = new NotionToMarkdown({ notionClient: notion });

  const mdblocks = await n2m.pageToMarkdown(params.id);
  const mdString = n2m.toMarkdownString(mdblocks);

  const html_text = unified()
    .use(markdown)
    .use(remarkGfm)
    .use(require("unified-remark-prismjs"), {
      showLanguage: true, // show language tag
      enableCopy: true,
    })
    .use(remark2rehype)
    .use(html)
    .processSync(mdString).value;

  return {
    props: {
      html_text,
    }, 
  };
}

const Page = ({html_text}) => {
	return (
		<div dangerouslySetInnerHTML={{__html: html_text}}></div>
	)
}

javascript