Notion + Nextjs based boilerplate template with Material UI Theme Control

Setup

To be able to use this as an template for multiple projects you can use another package called custom-templates and clone this repo into your templates folder.

git clone <https://github.com/xrehpicx/pages-notion-nextjs.git>

Configure

site.config.ts can be used to configure the notion page you want to render.

Warning: Make sure you set your node version of your hosting to 14.x in for link preview images to work

1. Get rootNotionPageId from your notion page url

   Your root notion page is your main page and will be mapped to your / url

   

   From the link https://xrehpicx.notion.site/Pages-template-945f21e491264a8192d8ff63b28a45d8 your rootNotionPageId would be 945f21e491264a8192d8ff63b28a45d8

2. Changing Theme

   The colors of the website can be changed by changing the theme.tsx file

   export const defaultdarkpallete: PaletteOptions = {
     mode: 'dark',
     text: {
       primary: '#fff'
     },
     primary: {
       main: '#00FFCA'
     },
     secondary: {
       main: '#ff6060'
     },
     background: {
       paper: '#0e1118',
       default: '#06080c'
     }
   }
   

Demos

Atria IEEE Student Branch

Pages template

Pages | by raj

nrohan

Review | Atria.

References

https://github.com/xrehpicx/pages-notion-nextjs