POC 구현검증

vercel.com 배포 연습 페이지

1. 노션 데이터로 정적 사이트 생성(SSG)이 가능할까?

1. 파일구조 프로토타입

JavaScript

복사

/poc-prototype
│
├── /src
│   ├── /app
│   │   ├── /api
│   │   │   └── /deploy
│   │   │        └── route.js   # 생성한 웹사이트 Vercel로 배포하는 api
│   │   │   └── /notion
│   │   │       └── [...slug]   # Notion API를 사용한 데이터 fetch
│   │   │            └── route.js   # Notion API를 사용한 데이터 fetch해서 웹사이트 생성하는 api
│   │   ├── /layout.js            # 메인 레이아웃
│   │   └── /page.js              # 메인 페이지
│   ├── /components
│   │   ├── NotionPageRenderer.js  # react-notion-x를 이용해 Notion 페이지 렌더링
│   │   └── LoginButton.js         # 로그인 버튼 컴포넌트
│   │
│   └── /lib
│       └── notion.js              # Notion API를 통한 데이터 fetch 로직
│
└── package.json

2. react-notion-x 라이브러리로 Notion 페이지 렌더링

노션 원본

ALT

react-notion-x 라이브러리로 렌더링한 노션 페이지

ALT

미구현 항목

칸반보드(노션 데이터베이스)

코드블럭(기본 코드블럭은 가능한데 머메이드 등 특정 언어는 불가능)

하위페이지(링크는 있지만 로컬호스트를 사용해서 그런지 클릭하면 404에러 발생)

react-notion-x는 어느정도 react로 노션 컨텐츠를 가져오게 도와주는 라이브러리

노션 데이터 가져오기

JavaScript

복사

import { NotionAPI } from 'notion-client'

const notionClient = new NotionAPI()

const recordMap = await notionClient.getPage('가져올 노션 url') // https://repeated-lycra-c2c.notion.site/POC-1059d270074a80cd8d66f098fbe5b5bf?pvs=4 을 가져온다면, 1059d270074a80cd8d66f098fbe5b5bf를 입력

const response = NextResponse.json({ recordMap });
return response;

가져올 노션 url

https://repeated-lycra-c2c.notion.site/POC-1059d270074a80cd8d66f098fbe5b5bf?pvs=4 의 구조

https://repeated-lycra-c2c.notion.site/ : 개인도메인 + 노션 도메인

/POC-1059d270074a80cd8d66f098fbe5b5bf 해당 페이지의 url, 제목이 영어로 구성되어 있으면 앞에 POC- 등과 같이 붙고, 정확히는 뒷부분이 주소 (POC-1059d270074a80cd8d66f098fbe5b5bf 로 주소를 넣어도, 1059d270074a80cd8d66f098fbe5b5bf로 주소를 넣어도 동일한 페이지로 인식)

1059d270074a80cd8d66f098fbe5b5bf 구성은 UUID로 되어있음 ( 8자리-4자리-4자리-4자리-나머지 형식)

?pvs=4 기록변경에 대한 버전관리(4번의 변경기록이 있는 페이지)

JavaScript

복사

import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'

export default ({ recordMap }) => (
  <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />
)

React로 렌더링

2. 생성한 페이지를 url만으로 배포하는게 가능할까?

배포는 가능했지만, 렌더링에 대한 부분은 더 알아봐야 함

ALT

JavaScript

복사

    const recordMap = await notion.getPage(pageId);

    const htmlContent = `
      <html>
        <head>
          <title>Notion Page - ${pageId}</title>
          <style>
            body { font-family: Arial, sans-serif; }
          </style>
        </head>
        <body>
          <h1>Notion Page ID: ${pageId}</h1>
          <p>This is a deployed version of your Notion page.</p>
          <pre>${JSON.stringify(recordMap, null, 2)}</pre>
        </body>
      </html>
    `;
    
      const vercelResponse = await fetch('https://api.vercel.com/v13/deployments', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${process.env.VERCEL_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: 'notion-page-test',
        files: [
          {
            file: 'index.html',
            data: htmlContent,
          },
        ],
        target: 'production',
        projectSettings: {
          devCommand: '',
          installCommand: '',
          buildCommand: '',
          outputDirectory: '',
          rootDirectory: '',
        },
      }),
    });

서버사이드에서 노션을 렌더링하는 기능을 가진 라이브러리는 없는 것 같음

puppeteer로 snapshot을 찍는 방식으로 가져오는건 가능함

3. 일부분 배포 시 입력 에디터

tiptap_editorTiptap block editor template​

tiptap​

tiptap 에디터는 노션과 입력하는 방식이 동일 → 

참고 url

react-notion-x​

nextjs-notion-starter-kit​

engage_intellectBuilding a Next.js Application with Notion as a Backend​

DEV CommunityUse Notion as a database for your Next.JS Blog​

npmnpm: @notionhq/client​

Next.js 프로젝트에 Notion 페이지 연결하기​

WebKBSNotion API를 사용한 Next.js 페이지 만드는 방법 feat. react-notion-x​

Cracking Next.jsCracking Next.js​

next routing 2가지​

dygreen[Next.js] Pre-rendering과 Data Fetching​

Building Your Application: Rendering​

4. 순수 Notion API만 이용해서 렌더하는 경우

<NotionPageRenderer />

JavaScript

복사

/<div[^>]*data-block-id[^>]*>.*?<\/div>/g

^ → 입력시작

→

g → global(문자열 내의 모든 패턴 검색)

5. Partial deploy 사고 흐름

빈페이지

플로우차트

url 입력

puppeteer로 notion 데이터 가져옴

모든 블록옆에 선택/삭제버튼 제공

사용자가 선택한 블록들만 남긴 데이터 저장

커스터마이징된 데이터만 빈 노션페이지로 puppeteer사용해서 불러와 삽입 후 스냅샷 찍어서 배포

vercel에 스냅샷 배포 및 서브도메인 설정

전체배포시 노션 데이터 블럭 콘솔창 확인

부분배포시 노션 데이터 블럭 콘솔창 확인