An enhanced starter kit for building websites with Next.js and Notion, now optimized for Cloudflare Pages and additional features.
This repo is a customized version of the Next.js Notion Starter Kit by Travis Fischer. It has been adapted to work seamlessly with Cloudflare Pages and includes additional features, such as:
- Utterances Integration for blog comments
- Extended configuration options
- Enhanced deployment compatibility
It still uses Notion as a CMS via react-notion-x, along with Next.js. For deployments, this version is now optimized for Cloudflare Pages but remains compatible with Vercel.
- Quick setup with a single configuration file (
site.config.ts) - Full support for Notion content via react-notion-x
- Built with Next.js, TypeScript, and React
- Optimized for Cloudflare Pages and Vercel
- Excellent performance and page speeds
- Automatic pretty URLs
- Smooth image previews
- Automatic social images
- Table of contents for long articles
- Dark mode support
- Comment support with Utterances
- Responsive design for different devices
- Default Demo - Deployed from the customized version of the starter kit
All configurations are defined in site.config.ts.
This project requires a recent version of Node.js (recommended >= 16).
-
Clone this repository.
-
Customize
site.config.tswith your own settings. -
Install dependencies:
npm install
-
Run locally:
npm run dev
-
Deploy to Cloudflare Pages:
- Make sure your Notion root page is public and copy the Notion page ID.
- Follow the Cloudflare Pages setup guide to deploy your project.
-
Enjoy your new site!
If you'd like to deploy to Vercel instead, follow the original guide. This version remains fully compatible with Vercel.
This version includes Utterances for adding GitHub-powered comments to your blog posts. To enable comments, make sure to configure your Utterances repository in Utterances.tsx.
Feel free to fork this repo and submit pull requests for any improvements or features you'd like to add! Contributions are always welcome.
This project is licensed under the MIT License. See the LICENSE file for details.
Enjoy building your Next.js and Notion-powered site! 🚀