개념을 위해 빠르고 정확한 반응 렌더러. TS 배터리 포함. ⚡️
개념을 사용하여 웹 사이트를 게시하려면 모든 세부 사항을 처리하는 Great Perf가있는 호스팅 된 솔루션 인 Super.so를 사용하는 것이 좋습니다.
React를 통해 귀하의 웹 사이트를 더 많이 제어하려면 무료이며 react-notion-x 사용하는 다음 Next.js 스타터 키트를 확인하는 것이 좋습니다.
그리고 당신이 더 많은 통제를 원한다면, 당신은 올바른 장소에 있습니다! ??
next/dynamic 통해 더 무거운 구성 요소를 게으르게로드 할 수 있습니다next/image 지원합니다.먼저 개념 페이지의 콘텐츠를 가져오고 싶을 것입니다.
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )개념 페이지에 대한 데이터가 있으면 React를 통해 렌더링 할 수 있습니다.
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
) 참고 : 더 무거운 블록의 경우 NotionRenderer.components 를 통해 사용을 선택해야합니다. 기본 NotionRenderer 내보내기에는 많은 사용 사례에 비해 너무 헤비가 있기 때문에 이들은 포함되지 않습니다.
CSS 스타일도 가져와야합니다. Next.js를 사용하는 경우이 가져 오기를 pages/_app.js 에 배치하는 것이 좋습니다.
// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'
// used for code syntax highlighting (optional)
import 'prismjs/themes/prism-tomorrow.css'
// used for rendering equations (optional)
import 'katex/dist/katex.min.css' react-notion-x 의 기본 가져 오기는 가능한 한 가벼워 지도록 노력합니다. 대부분의 블록은 잘 렌더링되지만 PDF 및 수집보기 (데이터베이스보기)와 같은 더 큰 블록은 기본적으로 포함되지 않습니다.
그것들을 사용하려면 react-notion-x/build/third-party/* 에서 원하는 것을 가져와야합니다.
import { Code } from 'react-notion-x/build/third-party/code'
import { Collection } from 'react-notion-x/build/third-party/collection'
import { Equation } from 'react-notion-x/build/third-party/equation'
import { Modal } from 'react-notion-x/build/third-party/modal'
import { Pdf } from 'react-notion-x/build/third-party/pdf'사용 사례를 위해 미리 필요하다는 것을 알지 않는 한 Lazy-Loading이 구성 요소를 강력히 권장합니다.
Next.js를 사용하는 경우 Next/Dynamic을 사용하여 게으르게로드 할 수 있습니다. 개념 콘텐츠가 이러한 헤비급 구성 요소 중 하나를 사용하지 않으면 페이지에로드되지 않습니다. 이것은 초기 페이지 번들을 작게 유지하고 웹 사이트는 느껴집니다.
import dynamic from 'next/dynamic'
const Code = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/code' ) . then ( ( m ) => m . Code )
)
const Collection = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/collection' ) . then (
( m ) => m . Collection
)
)
const Equation = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/equation' ) . then ( ( m ) => m . Equation )
)
const Pdf = dynamic (
( ) => import ( 'react-notion-x/build/third-party/pdf' ) . then ( ( m ) => m . Pdf ) ,
{
ssr : false
}
)
const Modal = dynamic (
( ) => import ( 'react-notion-x/build/third-party/modal' ) . then ( ( m ) => m . Modal ) ,
{
ssr : false
}
) NotionRenderer 의 components 소품에 전달하여 활성화해야합니다.
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) Code 구성 요소는 후드 아래에서 프리즘을 사용합니다. 기본적으로 JavaScript, TypeScript 및 CSS를 지원합니다. 추가 언어 구문에 대한 지원을 추가하려면 런타임에 프리즘 구성 요소를 게으르게로드하는 components/NotionPage.tsx 의 예를 따르십시오. Code 구성 요소를 사용할 때 prismjs 프로젝트에 추가하여 TypeScript가 불평하지 않을 것입니다.
Equation 지원을 위해서는 Katex CSS 스타일을 가져와야합니다.
이러한 옵션 구성 요소 각각에 대해 필요한 경우 (위) 관련 타사 CSS를 가져 오는지 확인하십시오.
개인 개념 페이지에 액세스하려면 선택적으로 authToken 과 activeUser API로 전달할 수 있습니다. 웹 브라우저에서 둘 다 검색 할 수 있습니다. 작업 공간을 보면 개발 도구> 응용 프로그램> 쿠키>를 열고 token_v2 및 notion_user_id 복사하십시오. 각각, ActiveUser : Notion_user_id, Authtoken : Token_v2.
이를 환경 변수로 저장하고 다음과 같이 NotionAPI 생성자로 전달하는 것이 좋습니다.
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} ) notion-client 비공식 개념 API (모든 개념 앱이 사용하는 것)를 사용하기 때문에 공식 개념 API가 제공하는 API 토큰과 동일하지 않습니다.
다음은 pages/[pageId].tsx 및 components/NotionPage.tsx 에서 가장 중요한 코드가있는 최소 Next.js 예제 프로젝트입니다. 이 예제는 Vercel에서 Live를 볼 수 있습니다.
다음은 pages/[pageId].tsx 및 components/NotionPage.tsx 에서 가장 중요한 코드가있는보다 완전한 기능을 갖춘 Next.js 예제 프로젝트입니다. 이 예제는 Vercel에서 Live를 볼 수 있습니다.
완전한 기능을 가진 데모는 몇 가지 멋진 기능을 추가합니다.
제작 예를 보려면 후드 아래에서 react-notion-x 사용하는 Next.js Notion Starter Kit를 확인하십시오.
| 패키지 | NPM | 환경 | 설명 |
|---|---|---|---|
| React-notion-x | 브라우저 + SSR | 개념에 대한 빠른 반응 렌더러. | |
| 개념-클라이언트 | 서버 측* | 개념 API에 대한 강력한 TypeScript 클라이언트. | |
| 개념 유형 | 만능인 | 핵심 개념 타입 스크립트 유형. | |
| 개념 | 만능인 | 개념 데이터 작업에 유용한 유틸리티. |
* CORS 제한으로 인해 개념의 API를 클라이언트 측 브라우저에서 호출해서는 안됩니다. notion-client 는 Node.js 및 Deno와 호환됩니다.
개념 블록 및 수집보기의 대부분은 완전히 지원됩니다.
| 블록 유형 | 지원 | 블록 유형 열거 | 메모 |
|---|---|---|---|
| 페이지 | ✅ 예 | page | |
| 텍스트 | ✅ 예 | text | 알려진 모든 텍스트 서식 옵션을 지원합니다 |
| 서표 | ✅ 예 | bookmark | 외부 URL의 임베디드 미리보기 |
| 총알 목록 | ✅ 예 | bulleted_list | <ul> |
| 번호가 매겨진 목록 | ✅ 예 | numbered_list | <ol> |
| 제목 1 | ✅ 예 | header | <h1> |
| 제목 2 | ✅ 예 | sub_header | <h2> |
| 제목 3 | ✅ 예 | sub_sub_header | <h3> |
| 인용하다 | ✅ 예 | quote | |
| 호출 | ✅ 예 | callout | |
| 방정식 (블록) | ✅ 예 | equation | React-Katex를 통한 Katex |
| 방정식 (인라인) | ✅ 예 | text | React-Katex를 통한 Katex |
| TODOS (확인란) | ✅ 예 | to_do | |
| 목차 | ✅ 예 | table_of_contents | notion-utils getPageTableOfContents 도우미 기능을 참조하십시오 |
| 분할기 | ✅ 예 | divider | 횡선 |
| 열 | ✅ 예 | column | |
| 열 목록 | ✅ 예 | column_list | |
| 비녀장 | ✅ 예 | toggle | <details> |
| 영상 | ✅ 예 | image | <img> |
| 포함시키다 | ✅ 예 | embed | 일반적인 iframe 포함 |
| 동영상 | ✅ 예 | video | iframe |
| 피그마 | ✅ 예 | figma | iframe |
| Google지도 | ✅ 예 | maps | iframe |
| 구글 드라이브 | ✅ 예 | drive | Google 문서, 시트 등 사용자 정의 포함 |
| 짹짹 | ✅ 예 | tweet | Twitter Embedding SDK를 사용합니다 |
| ✅ 예 | pdf | S3 서명 URL 및 React-PDF를 사용합니다 | |
| 오디오 | ✅ 예 | audio | S3 서명 URL 및 HTML5 audio 요소를 사용합니다 |
| 파일 | ✅ 예 | file | S3 서명 URL을 사용합니다 (일반 다운로드 파일) |
| 링크 | ✅ 예 | text | 외부 링크 |
| 페이지 링크 | ✅ 예 | page | 동일한 작업 공간에서 개념 페이지에 링크 |
| 외부 페이지 링크 | ✅ 예 | text | 다른 작업 공간에서 개념 페이지 또는 수집보기에 대한 링크 |
| 코드 (블록) | ✅ 예 | code | PRISMJS를 통한 블록 코드 구문 강조 |
| 코드 (인라인) | ✅ 예 | text | 인라인 코드 형식 (구문 강조 표시 없음) |
| 컬렉션 | ✅ 예 | 데이터베이스라고도합니다 | |
| 컬렉션보기 | ✅ 예 | collection_view | 컬렉션에는 수집 뷰에 1 : N 매핑이 있습니다 |
| 수집보기 테이블 | ✅ 예 | collection_view | type = "table" (기본 테이블보기) |
| 컬렉션보기 갤러리 | ✅ 예 | collection_view | type = "gallery" (그리드보기) |
| 컬렉션 뷰 보드 | ✅ 예 | collection_view | type = "board" (Kanban View) |
| 수집보기 목록 | ✅ 예 | collection_view | type = "list" (수직 목록보기) |
| 컬렉션 뷰 캘린더 | 없어진 | collection_view | type = "calendar" (내장 캘린더보기) |
| 수집보기 페이지 | ✅ 예 | collection_view_page | 독립형 페이지로 수집보기 |
문제 나 누락 된 블록을 찾으면 알려주십시오.
알려진 모든 블록과 가장 알려진 구성 설정은 테스트 스위트에서 찾을 수 있습니다.
Google Lighthouse는 Vercel의 'React-Notion-X'가 렌더링 한 예제 페이지에 대해 점수를 매 깁니다.
상자 밖에서 react-notion-x 는 매우 빠르고 비교적 가볍지 만 알아야 할 몇 가지 주요 요소가 있습니다.
Bundlephobia는 주요 react-notion-x 번들에 대한 ~ 28KB GZIP 번들 크기를보고합니다. 여기에는 페이지가 필요한 경우에만 Next/Dynamic을 통해 게으른로드를 권장하는 옵션 third-party 구성 요소가 포함되지 않습니다.
Perf의 또 다른 주요 요인은 개념으로 호스팅 된 이미지에서 비롯됩니다. 그들은 일반적으로 최적화되지 않고 부적절한 크기이며, 개념은 언제든지 사용자가 변경할 수있는 세밀한 액세스 제어를 처리해야하기 때문에 캐시 할 수 없습니다. NotionRenderer 의 기본 mapImageUrl 함수를 무시하여 CloudFlare Workers와 같은 CDN을 통해 캐싱을 추가 할 수 있습니다. 이것이 최적의 페이지로드 속도를 위해 X가 수행하는 것입니다.
NotionRenderer 또한 선택적인 저품질 이미지 자리 표시 자 미리보기로 게으른 이미지 로딩을 지원합니다. 이 페이지에서 LQIP-Modern을 사용하여 Medium.com의 이미지 로딩에서 영감을 얻은 자리 표시 자 이미지를 사전 생성하는 자리 표시 자 이미지를 실제로 볼 수 있습니다.
Next.js를 사용하는 경우 next/image 또는 next/legacy/image 전달하고 다음과 같은 렌더러 next/link 를 전달하는 것이 좋습니다.
import Image from 'next/image' // or import Image from 'next/legacy/image' if you use legacy Image
import Link from 'next/link'
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
nextImage : Image , // or nextLegacyImage: LegacyImage,
nextLink : Link
} }
/>
) 이것은 다음 Next.js 구성 요소를 호환성 레이어로 랩핑하므로 NotionRenderer Nonxt.js 등가 <img> 및 <a> 와 동일하게 사용할 수 있습니다.
사용자 정의 이미지 구성 요소는 현재 미리보기 이미지를 사용하여 또는 NotionRenderer 의 forceCustomImages 켜는 것만으로 만 활성화됩니다.
react-notion-x 사용합니다react-notion-x 다양한 유형의 개념 콘텐츠 (특히 컬렉션)에 대한 더 나은 지원으로 react-notion 의 포크로 시작하여 훨씬 더 포괄적 인 것으로 성장했습니다.react-notion 더 이상 적극적으로 유지되지 않습니다notion-types 및 notion-client 는 notion-api-worker 의 재 작성입니다react-notion-x 의 주요 사용 사례 중 하나는 Next.js를 통한 서버 측 렌더링입니다.이 경우 CF 작업자는 불필요합니다.기여 가이드를보고 놀라운 기고자 목록에 참여하십시오!
MIT © Travis Fischer
이 프로젝트는 Timo Lins, Tobias Lins, Sam Wight 및 기타 기고자의 MIT 라이센스 작업을 확장합니다.
트위터에서 나를 팔로우하여 내 OSS 작업을 지원하십시오
Super.so는이 프로젝트를 후원하기에 충분히 친절했습니다. react-notion-x 와 매우 유사한 접근 방식을 취하지 만 모든 세부 사항을 처리하는 호스팅 솔루션을 찾고 있다면 확실히 확인하십시오.
