What is notion-on-next?
It’s a library that makes it extremely easy to develop a Next.js App using Notion as a CMS. Automatically generates types and provides components to render your Notion pages. In fact, willliu.com was built using this library.
If you want to get started, I recommend checking out notion-on-next-starter, which is a next app that is already hooked up to a couple of databases. Follow the instructions in the readme. If you want to integrate Notion into an existing Next app, then follow the documentation in notion-on-next.
This is my second npm package, but it’s the first one that actually does anything useful. I’m pretty proud of it and I really hope that people well get some good use out of it.
Challenges
- Decoding the types in the official Notion API. They didn’t have a ton of documentation when it came to using typescript, so I had to figure most of it out. It was especially confusing because some of their types did not completely match their API. I still have an open thread with their dev team to get some of the types updated!
- Figuring out how to organize a package that contains both react components and executable scripts.
- Figuring out how to provide structure for a user, while allowing for customizability. This is harder than I thought, especially when it comes to styling components. How do you let a user add styles to a deeply nested element inside of a component they are exporting from a library? In the end, I settled on providing specific classes that a user can override.