
Building a Blog with NextJS
Blogs haven't been the shiny new things for around a decade, but they're still a way for developpers or niche hobbyists to share their thoughts, their tutorials... I myself have spent hours reading blog posts from developpers, looking for information or insight, so when I was looking for some personal projects to buff up my portfolio, my first idea was right there !
Why NextJS ?
When developping something, the first question you must answer, and one of the most difficult ones, is what technology to use. The more intimate you become with the something you're developping, and the more confident you are with the available technologies, the easier the question becomes. But when you're starting, and you don't know the technology very well, it's easy to dive heads first into a stack, and midway through the project realize that there is some problem that's way harder to solve with this stack than it would have been with another. (The trap here is to then jump stacks : you'd better stick with your mistake, you'll learn a lot !).
The easy solution is planning : keep the project pretty minimalistic, and have a cursory idea of how to solve everything from the beginning. You don't need to be able to solve every problem before you even start, but you need to have identifieed atleast most of them, and therefore have an idea of what you'll need to build
When making a blog website, there's not a ton you need to do : you need a way to store, retrieve, and search text-heavy data, and that data should be easy to modify and style. You don't need to store a ton of data, because if it's a personal blog, you'll be the one producing all the data !
What options do we have ?
The first idea that comes to mind might be Wordpress, the #1 CMS in the world. Well, I have a few problems with Wordpress. Firstly, it's super heavy. Sure, you have a bunch of options, you can add templates for everything and anything.
But there's a real cost that comes with that : a heavy interface, a lot of "useless" options, and generally just a very opiniated framework, that lets you do very complicated things simply, but makes simple things complicated !
The second option was the one I have learned at school : a React front-end, hooked to an Express API with a MongoDB database. The infamous MERN stack. Very simple, very powerful, lots of knowledge online, and something I have a lot of confidence on.
But, I wanted this project to be something new for me, I wanted to learn about the React Server Components, the SSR/SSG, and having an entire database just for storing blog entries seemed a bit overkill. There would be no need for programatically writing to the database, and there would not be a ton of content : seemed easier to me to just have an on-server static folder of .md (markdown) files.
And well, lo and behold, there is one technology that implements React Server Components natively and that is a fullstack framework without the need for a database !
Of course I'm talking about NextJs, and that is the reason I decided to go with this framework on this project : it is simple enough yet powerful enough. Just the right amount of fullstack goodies, while being very straightforward to deploy. Love it.
Now what ?
Alright, now that we've decided on the framework we're using, and we've decided how to store our data (static .md files in a folder on the server), we know we don't need to programatically write or store the data. We just need to :
- Parse the markdown to display the content of the posts
- Read and display the metadata (title, date, etc) on nice-looking cards
- Add some AI features, because why not ?
All this, and more, in the next few blog posts !
Recommended reads
Explore more on the same subject