Based off of Travis Fischers Next.js Notion Starter Kit.
It uses Notion as a CMS, react-notion-x, Next.js, and Vercel.
- Setup only takes a few minutes (single config file) 💪
- Robust support for Notion content via react-notion-x
- Built using Next.js, TS, and React
- Excellent page speeds
- Smooth image previews
- Automatic social images
- Automatic pretty URLs
- Automatic table of contents
- Full support for dark mode
- Quick search via CMD+K / CMD+P
- Responsive for different devices
- Optimized for Next.js and Vercel
All config is defined in site.config.ts.
This project requires a recent version of Node.js (we recommend >= 16).
- Fork / clone this repo from the
mainbranch - Change a few values in site.config.ts
npm installnpm run devto test locallynpm run deployto deploy to vercel 💪
Configuration is as easy as possible — All you really need to do to get started is edit rootNotionPageId.
We recommend duplicating the default page as a starting point, but you can use any public notion page you want.
Make sure your root Notion page is public and then copy the link to your clipboard. Extract the last part of the URL that looks like 7875426197cf461698809def95960ebf, which is your page's Notion ID.
In order to find your Notion workspace ID (optional), just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called block which is the Notion data for the current page. If you enter block.space_id, it will print out your page's workspace ID.