Headless WordPress with Nextjs

A couple of days ago, I tried using Nextjs to re-design a frontend for my blog. I have to say I am quite satisfied with the results.
Nextjs fetches data from WordPress and stores it statically so the load speed is amazingly fast. I could also re-fetch data on a Node server with the “revalidate” option. This is a great way to update the front end when a new post is published and can work very efficiently.

As for now, The downside of using this approach is that I lost WordPress commenting system and I need to find a way to add commenting functionality to my blog. Most websites are publishing posts for SEO purposes so they don’t use comments but others may want to engage more with the reader and allow them to post comments.
To solve the issue of comments, I created a usr authentication system with Nextauth, the I used prisma to store comments in a sqlite database. This is a simple yet powerful way to offer commenting feature without relying on wordpress commenting system. However the user must login as an admin to a separate backend and approve comments. One might think if there is another backend why use wordpress.

This is the best way to speed up old and big wordpress websites, while keeping the same old wordpress backend for your team.

You can check the back end at this URL: https://wp.behnoud.net

This approach uses nextJs ISR (Incremental Static Regeneration) so when a post is published, a static version is created in th background and cached. This can give a huge benefit for huge webistes with a lot of visitors. By passing a revalidate prop to getStaticProps, the statically generated page can be regenerated every 10 seconds. The longer the time for revalidation, the better it is in terms of performance. I usually choose a time between 10 minutes and 30 minutes. The downside of this is that if the post is edited, it is not immidiately reflected in front end. So the user needs to wait 10 or 30 minutes for regeneration of page.