Skip to content

Latest commit

 

History

History
49 lines (31 loc) · 2.28 KB

readme.md

File metadata and controls

49 lines (31 loc) · 2.28 KB
Raw

React Notion X

This is a Next.js project bootstrapped with create-next-app.

Intro

This is a more full-featured Next.js example project using react-notion-x, with the most important code in pages/[pageId].tsx and components/NotionPage.tsx. You can view this example live on Vercel.

Config can be found in lib/config.ts

This demo adds a few nice features:

  • Uses next/image to serve optimal images
  • Uses preview images generated using lqip-modern
  • Includes larger optional components via next/dynamic
    • Collection, CollectionRow
    • Code
    • Equation
    • Pdf

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Preview Images

This demo uses next/image as a custom image component. It also generates preview images at page build time using lqip-modern.

Note that preview image generation can be very slow, so it's recommended that you either cache the results in a key-value database or disable it by setting previewImagesEnabled to false in lib/config.ts

Note that custom images will only be enabled if either the image has a valid preview image defined for its URL, or if you set forceCustomImages to true.

License

MIT © Travis Fischer

Support my OSS work by following me on twitter twitter