Code testing

Tags

Featured

Author

Published on

Last updated February 16, 2025


import Head from 'next/head'
import { type ExtendedRecordMap } from 'notion-types'
import { getPageTitle } from 'notion-utils'
import { NotionRenderer } from 'react-notion-x'
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,
  }
);

export function NotionPage({
  recordMap,
  rootPageId
}: {
  recordMap: ExtendedRecordMap
  rootPageId?: string
}) {
  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={true}
        darkMode={true}
        rootPageId={rootPageId}
        components={{
          Code,
          Collection,
          Equation,
          Modal,
          Pdf
        }}
      />
    </>
  )
}

Subscribe to our Newsletter to Get informative content on Notion and Productivity.

Blogs-database

Why use Notion as your project management software

Why use Notion as your project management software

Nov 4, 2024 06:56 AM

Temporary blog

Apr 3, 2025 10:12 AM

Feb 16, 2025 03:33 AM

Ever wondered having Pomodor timer on your windows Taskbar?

Ever wondered having Pomodor timer on your windows Taskbar?

Dec 19, 2024 09:52 AM