S2UZY

[260312] TIL

Today I Learned (2026-03-12)

Notion X

참고 링크

  1. 설치
pnpm add react-notion-x notion-client notion-types notion-utils
  1. Notion Page 컴포넌트 구현
'use client'

import { NotionRenderer } from 'react-notion-x'
import 'react-notion-x/src/styles.css'

import Head from 'next/head'
import { type ExtendedRecordMap } from 'notion-types'
import { getPageTitle } from 'notion-utils'

export function NotionPage({ recordMap }: { recordMap: ExtendedRecordMap }) {
  if (!recordMap) {
    return null
  }

  const title = getPageTitle(recordMap)

  return (
    <>
      <Head>
        <meta name="description" content="React Notion X Minimal Demo" />
        <title>{title}</title>
      </Head>

      <NotionRenderer recordMap={recordMap} fullPage={false} />
    </>
  )
}

Categories:

Updated:

Leave a comment

You may also enjoy