Replacing WordPress with Next.js - Part 1 Planning

Let's be honest, WordPress is just a little bit evil. When it was first made it was quick and simple to create a blog in minutes. But when something becomes popular it often grows and evolves into a monster that no longer resembles the original. Don't get me wrong I think WordPress has a place in this world. With unlimited plugins and themes you can build just about any kind of site you want to. But if you want a simple blog that loads fast and you can style exactly like you want, WordPress isn't the way to go anymore. There are other CMS frameworks available. But most of them are just trying to be more like WordPress. So it is time to just roll my own.

I've been playing with React (more specifically Next.js) for the last year or so. I've found some wonderful learning resources online. I also found several blog examples available on Github that demonstrate several ways of building a blog. But none of them have all of the features I would like. So my plan is to find one that has most of the features I want and then add the additional ones. Then use it for a while and then make it available free on Github once all of the bugs are worked out.

First what are all of the features I want? I like lists so I'll start with that.

Planned blog features

1. ⁠Blog (/slug) - I want the URL of each post to be ex: domain.com/post-slug format
2. ⁠Category filter (/category/slug) - I want to be able to add categories to a post and want a dedicated category page that lists all post in that category.
3. ⁠Comments - I want to have a multi tier comment structure so that you can reply to a specific comment that has been left on a post. Maybe also a Gravatar image of the user, if they have that set up.
4. ⁠Static pages - want to be able to add static pages to the site and add them to the navigation.
5. ⁠Search - I want to have a search form that will allow you to search all posts.
6. ⁠Social media share buttons - I want some nice icons that allow a user to share a post on their social media sites.
7. Dark mode - I want the user to be able to choose a light or dark mode for viewing the site.
8. Responsive - I want the site to work on any device.
9. SEO - I want the site to be very SEO friendly with META tags and a XML site map at domain.com/sitemap.xml
10. Accessible - I want to make the site as accessible as possible. Minimum keyboard navigation and acceptable color contrast.

Wow that sounds like a lot. But I think it is all doable. I might have to do it in phases. Launch the site with partial features and add to it as I go.

Plus I have found the Next.js community very helpful. So let's see how it goes.

Technologies that will be used

• Next.js - The code for the actual blog will be a SSG: Static Site Generated Next.js site. So it will be nice and fast. I'll use the Google Lighthouse Chrome extension during development to make sure everything is optimized.
• Headless CMS - The database and all of the admin pages will be handled by GraphCMS.
• GraphQL - The database call will all be done with GraphQL instead of Rest calls. Mostly because I want a little bit more experience under my belt with the technology.
• Tailwind CSS - The styling of the site will be handled by Tailwind CSS. Honestly I was against the framework for some time. Being a UI developer, used to hand coding CSS I didn't see the need. But now I am really starting to enjoy the framework.

The part 2 post will be the design work that I did before starting the coding.
⁠