노션에서 작성한 글을 실시간으로 웹사이트에 연동하기

1. 노션에 작성 글을 오른쪽 상단의 공유를 눌러 웹에서 공유를 선택 합니다.

-> 나온 url 의 마지막 내용을 아래 주소에 넣고 잘 나오는지 체크

 

https://notion-api.splitbee.io/v1/page/공유주소의 마지막 내용

 

2. react 에 react-notion 추가

 

https://github.com/splitbee/react-notion

GitHub - splitbee/react-notion: A fast React renderer for Notion pages

yarn add react-notion

 

3. 1번에서 공유할 주소를 2번의 react-notion 에 기재하여 호출 

 

import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; 
import { NotionRenderer } from "react-notion";

import React, { useState, useEffect } from 'react';

function App() {
  const [response, setResponse] = useState({});
  
  useEffect(() => {
    const NOTION_PAGE_ID = '연동할 notion 공유 url';
    fetch(`https://notion-api.splitbee.io/v1/page/${NOTION_PAGE_ID}`)
      .then(res => res.json())
      .then((resJson) => {
        setResponse(resJson);
      });
  }, [])
  
  return (
    <div className="App">
        <NotionRenderer
          blockMap={response}
          fullPage={true}
        />
    </div>
  );
}

export default App;

 

출처: 

 

https://velog.io/@leehaeun0/22.02.18-TIL-ReactNotion%EC%9C%BC%EB%A1%9C-%EB%85%B8%EC%85%98-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%97%90-%EC%9E%84%EB%B2%A0%EB%93%9C%ED%95%98%EA%B8%B0

react-notion으로 노션 페이지를 서비스에 임베드하기