Hello, World!
Building a blog with Next.js and Notion—because why not?
Over the past few years, this site has been my experimental playground for working with Next.js. Looking back through the commit history, the first commit dates four years ago. While being "production-ready" was never my primary goal, I now feel it's time to shift gears and explore new avenues, such as writing.
In this post, I’ll walk you through how I created this site and integrated it with third-party services like Notion (which I’m using to write this post) and Spotify. Whether you’re a developer looking to build something similar or just curious about the process, I hope you’ll find this insightful.
Getting started
The first reason why I decided to use Next.js was because it was the framework I was working with at the time. Still, besides that, SSR (Server Side Rendering) would be very beneficial because I’d be able to deliver and change content without having to rebuild static files.
Embracing Functional Programming
If you explore my website’s repository, you'll notice extensive use of the fp-ts library. My journey into functional programming began similarly to my adoption of Next.js—it was relevant to my job. The challenge of applying functional programming concepts and learning the fp-ts library made the experience both educational and fun.
Writing with Notion
The next step was to think about how I’d be able to write my posts. The most common way is using .md files, but I wanted a slightly better experience in writing them. I’ve been using Notion for a very long time, so I took some time to check their API and realized it could serve as a custom CMS.
I store my posts in a Notion database, which includes fields like title, status, likes, createdAt, description, and slug. The status field is particularly important as it controls the visibility of posts, allowing statuses like Draft, Published, and Unpublished to manage post visibility effectively.
The most interesting field is the status. I use this field to control whether to show the post to production or not. I have three statuses: Draft, Published, and Unpublished. It will show that specific post only in dev mode when it is in draft. Publish will show posts in any environment, and unpublished will not show any at all. This is the query that is used to filter out the posts:
Displaying posts
I have a Next.js page in /pages/blog/[slug].tsx that is responsible for rendering the posts. I use Next’s getStaticProps function to gather data from Notion based on the slug:
This code might look weird if you are not used to the fp-ts library or functional programming in general, but it is simply trying to fetch the post by slug (line 3) and mapping them to { props: post }, so the Next.js page receives it as props, and in case it cannot find any post, it returns a { notFound: true } which will show a 404 page.
To actually show the post content, we map through the data we received from Notion:
This BlockRenderer is just a switch statement that will render each component accordingly.
Spotify Integration
On the homepage, I added a "What I’ve Been Listening" section that fetches data from the Spotify API to display my top tracks.
The data fetching for Spotify tracks is quite similar to how I retrieve the post content from Notion using the getStaticProps function:
Here I also fetch the post preview to show the two most recent on the homepage.
The Spotify integration is handled through an API route and a middleware, so whenever I reach /api/spotify in case I don’t have authenticated yet, it will redirect me to the Spotify’s accounts page requesting the necessary scope to the top tracks API.
Once I have the token, I’ll make the API request and store it in a Redis database for further requests:
Wrapping up
This covers the overall integration with Notion and Spotify, but there’s so much more to explore. If you have any questions, ideas, or just want to chat about tech, feel free to reach out. I’m always excited to share knowledge and learn from others. Thank you for taking the time to read this blog post.