NotionX/react-notion-x
Notion 페이지를 React로 빠르고 정확하게 렌더링하는 TypeScript 라이브러리
5,420+0이번 주647147TypeScript
데모·홈페이지 열기react-notion-x-demo.transitivebullsh.it중간맛 분석
스택: React + TypeScript, Next.js 권장 (Vite, Remix도 가능). 난이도: 중하(기본 사용법은 간단하지만 고급 커스터마이징 가능). 바로 쓸 수 있는가: 네. notion-client로 페이지 데이터를 가져온 후 NotionRenderer에 전달하면 됩니다. 성능: Lighthouse 95-100점, Notion 공식보다 10-100배 빠름. 무거운 블록(PDF, 데이터베이스)은 next/dynamic으로 지연 로드 가능. 데모: 미니멀/풀 피처 예제가 Vercel에서 라이브 실행 중.
이런 레포예요
이럴 때 쓰면 좋아요
- Notion 페이지를 정적 블로그/문서 사이트로 배포
- Notion 데이터베이스를 갤러리나 포트폴리오로 시각화
- 팀 위키나 내부 문서를 Notion으로 관리하고 웹사이트로 공개
핵심 기능
50+개 Notion 블록 완벽 지원공식 API 대비 10-100배 빠른 렌더링lazy-loading으로 번들 크기 최적화
대안 대비 차별점
공식 Notion API와 달리 비공식 API를 활용해 더 많은 블록을 지원하고, 수만 개 프로덕션 사이트의 검증을 거쳤으며, 자체 타입 시스템과 유틸 라이브러리로 완전한 생태계를 제공합니다.
준비물
- React 16.8 이상
- Node.js 12 이상 (notion-client 사용 시)
바로 시작하기
- react-notion-x와 notion-client 설치
npm install react-notion-x notion-client
- Notion 페이지 데이터 가져오기
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI()
const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')
- 필수 CSS 스타일 import (Next.js의 경우 pages/_app.js에)
import 'react-notion-x/styles.css'
import 'prismjs/themes/prism-tomorrow.css' // 코드 하이라이팅용
import 'katex/dist/katex.min.css' // 수식 렌더링용
- NotionRenderer 컴포넌트로 렌더링
import { NotionRenderer } from 'react-notion-x'
export default ({ recordMap }) => (
<NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />
)
- (선택) 무거운 옵션 컴포넌트 동적 로드
import dynamic from 'next/dynamic'
const Pdf = dynamic(() => import('react-notion-x/third-party/pdf').then(m => m.Pdf), { ssr: false })
const Collection = dynamic(() => import('react-notion-x/third-party/collection').then(m => m.Collection))
export default ({ recordMap }) => (
<NotionRenderer recordMap={recordMap} components={{ Pdf, Collection }} />
)
별 추이 · 7일
5,420+0 / 7일
활용성 · 따라 만들기 좋은가
따라 하기 좋음샘플 점수 50/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2020년 생성
AI가 README 기반으로 요약했습니다 · 원문 보기