logo

Made By Michael Casagrande

🍺

Notion to Next.JS

πŸ“Œ
Currently testing for future release!!!
Β 
Β 

A website builder made with Notion and Next.JS


This page is used to test new features and custom implementations that Notion doesn’t provide.
Β 
🚨
This is an Alpha version for testing purpose using Next.JS v13 and the App Router
Β 
πŸ”‘
Password-protected pages (these are also encrypted 🫑)
Β 
⚑
Yes that's a subpage! Protected with password
Password is : token
πŸ”‘
Built-in Twemoji support
Β 
πŸ˜…
Emojis
πŸ”‘
Built-in custom navbar
πŸ”‘
Automatic generate pretty-urls for every page
πŸ”‘
Automatic generate SEO based on page content
πŸ”‘
Support almost all Notion’s blocks
πŸ”‘
Inject custom HTML/CSS in any page
πŸ”‘
Can use Notion’s private pages
πŸ‘Œ
Example config file
Β 
module.exports = { // where it all starts -- the site's root Notion page rootNotionPageId: "1adb9afa-672e-46de-8cdb-9269ca488514", rootNotionSpaceId: "e3e5a1ca-92f1-4bf2-9506-538fc89190bc", // basic site info name: "Test project ⚑", domain: "notion-builder.michaelcasa.com", author: "MichaelCasaDev", description: "A project to test my amazing notion to nextjs builder!", favicon: "⚑️", // global website font fontFamily: "Inter", // if you want to use the ID of the notion page in the URL includeNotionIdInUrls: false, // hide blocks ID in HTML hideBlockId: true, // search ability (NEED TO FIX, due to the recordMap) searchEnabled: false, // enable if using a private notion page privatePage: false, // enable if use twemoji emoji set or the client ones useTwemoji: false, // default notion icon and cover images for site-wide consistency defaultPageIcon: null, defaultPageCover: null, defaultPageCoverPosition: 0.5, // password protected pages cookie name passwordPagesCookie: "token", // global code that apply on entire website globalCode: ``, // personalize the protected page login code loginCode: ``, // custom 404 page from Notion custom404Page: "", // brand banner brandBanner: { enabled: true, link: "https://twitter.com/MichaelCasaDev", text: "Made By Michael Casagrande", logo: "/img/logoAlt.svg", }, // use built-in themes system theme: "system", // system - dark - light // custom built-in navbars navBar: { type: "default", // default - simple - minimal logo: { type: "text", // text - image image: { width: "16px", url: "https://twemoji.maxcdn.com/v/13.1.0/svg/1f4e2.svg", }, text: { fontSize: "16px", text: "", fontWeight: "600", }, }, callToAction: { text: "Call To Action!", linkTo: "https://twitter.com/MichaelCasaDev/status/1408447633157410820", bgColor: "#42f5b6", txColor: "#000000", }, items: [ { title: "Home", link: "/", }, { title: "Twitter", link: "https://twitter.com/MichaelCasaDev", }, { title: "Google", link: "https://google.com", }, ], style: { bgColor: "#FFF", txColor: "#000", height: "56px", visScroll: true, themeColor: true, shadow: { type: "small", // none - small - medium - large color: "0,0,0", // R G B opacity: "0.2", }, }, }, // map of notion page IDs to URL paths pageUrlOverrides: { "/foo": "067dd719a912471ea9a3ac10710e7fdf", "/bar": "0be6efce9daf42688f65c76b89f8eb27", }, // Custom settings per-page pagesSettings: { "2b9c1a0e-005b-438c-a558-da71f6ccbfb1": { SEO: { title: "Custom Title", description: "Custom Description", image: "", }, protection: { enabled: true, token: "token", }, code: ``, }, "102ae08b-749d-4c6b-ade3-1427b5b2bced": { SEO: { title: "", description: "", image: "", }, protection: { enabled: true, token: "tokenen", }, code: ``, }, }, };

2022 - 2023 (c) Michael Casagrande
Last edit: February 2023
Β 

null