/pages-notion-nextjs

Primary LanguageTypeScript

Mui Next.js Notion Starter Kit

Built on top of nextjs-notion-starter-kit to have use mui theming.

Prettier Code Formatting

Intro

This template is what I used for my blog page pages.raj.cool.

It uses Notion as a CMS, react-notion-x, Next.js, and Vercel.

Features

  • Set global colors using mui theming
  • 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

Setup

All config is defined in site.config.ts.

This project requires a recent version of Node.js (>= 14.17).

  1. Fork / clone this repo
  2. Change a few values in site.config.ts
  3. npm install
  4. npm run dev to test locally
  5. npm run deploy to deploy to vercel 💪

Mui Theming

This uses the mui ThemeProvider and createTheme from here