Originally published on my blog. Medium’s code blocks are pretty bad, so I suggest you read this on my blog if you need to read and/or copy code.

One of my latest projects is an entire blog built with Next.js, a framework based on React. One of the features I wanted was a commenting system, but none of those already available were interesting for me and I wanted full control on the features and the data. Because of that, I decided to create my own commenting system. …


In the first part of this series, we built the basics of a commenting system while in the second one we finally added nested comments. In this third and final article, we’ll add Emoji Reactions. This is going to be useful because people can interact with your content without the need to write a comment. An alternative would be a Reddit-like voting system, but I think that emojis will add a bit of color to our comments, so I decided to go for them.

Example of Emoji Reactions

Features

The emojis should update real-time and be lightweight, as we don’t want to slow down everything…


In the previous part of this series we created the foundations of this project and now we have a basic commenting system where we can create and display comments in real time. This time we’re going to add some extra functionalities, like nested comments and markdown support.

Photo by James Harrison on Unsplash

Nested Comments

There are a lot of ways to do nested comments and some of them may work better than my method, but for what we need and use (real time updates and Sanity.io as dataset), I found this to be the best approach.

How to do Nested Comments

In the previous post we created a Comment schema which included…

Alessio Franceschi

Software Developer in Italy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store