full

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