The 10 reasons to build your blog with NextJS, MDX and a headless CMS
February 5, 2024
.png&w=3840&q=75)
I get it. You don't have time and want to publish your blog somewhere easy. That's OK. There are plenty of options out there that have you covered.
And you know what? For most of us, they're the better option. Spin up a template, pick a domain name and off you go. I'm sure you've also been tempted by the "Build your website in 5 minutes" slogans.
But today, I write a case against these options. Against out-of-the-box solutions. Why? Because long-term, building your own fully customized, automated, with tears-and-blood-created website will pay off. By far.
Here's why.
#1: Learn and practice invaluable skills
No matter how skilled you are in web development, you'll always learn something new by building new projects. The beauty of a blog project is its versatility. Create a basic blog with a minimalist design if you're a beginner. Add more complex features and functionality the more advanced you are/become.
With an actual project, you'll learn more than watching another online course with irrelevant mini assignments like centering texts in a div. And it sticks.
A pre-configured AI website teaches you nothing but prompting and desperately trying to get the tool to do what you want. Only to find out it never will. Which brings me to the next point.
#2: Stand out with your unique design
Every day, around 250.000 websites are created, according to the 2023 Web Server Survey. Most of them look alike. With a custom-designed website, you have the flexibility to stand out: colors, animations, fonts, padding, layout… all up to you.
"But I'm not talented in design" is a common reaction. You don't need to be. Don't start with a blank canvas. Scroll through websites like Dribble.com to find inspiration. And then go off and build it. To give you an example:
This blockquote component is 100% custom designed.
The point is that you own all design choices and are not tied to a website builder's themes and design decisions.
#3: Wow your readers with more than words
We all love to read a good article. But what makes it a great article? An article people will remember because they've never seen something similar before?
Adding unexpected extras. Like interactive components to play around with. Live code examples. Social media feeds. Real-time data from your own server. There's no limit if you build your blog with a modern framework like NextJS. The best example of this is Josh Comeau's Interactive Guide to Flexbox.
This is the beauty of MDX. Write plain text and sprinkle it with your custom components.
#4: Leverage your content by treating it like data
Organize your content with a CMS = Content Management System. Like a database for all your content. The primary benefit is structure. Filter posts, articles, comments by any data field you like. E.g., list the most popular reads of the past 30 days.
This way, you separate the body (what readers read) from the data. Use that data to organize your blog, to make it easy for readers to find your stuff and ultimately, to guide your content strategy.
Plus, structured content can be easily repurposed. Why not create a script that transforms any new article into a summary post, takes the cover picture, adds relevant hashtags, your subscriber link and posts it on social media?
Treating your content like data is required to build these big and powerful systems.
#5: Own your content and take it with you
Depending on the website builder, your content sits on their servers. Which comes with a few issues. The biggest one is format. Yes, they have a neat editor to write your texts, but do you know how it's stored? Can you bulk download all your content in a standardized format like Markdown?
This doesn't sound necessary when you start out. But the tech landscape is changing faster than ever. And you don't want to spend days or weeks to get your content from provider A to B when you want or need to switch.
Additionally, there exist reports of people losing all their content on major platforms overnight. While it's a low chance, and you can mostly get it back after hassling with the support team for weeks, it's not a pleasant experience.
With your own site, you can write all your content in MDX and save it locally, on GitHub, and the server. It's yours.
#6: Deliver high-speed performance
Speed matters. As the web goes faster and faster, your readers become impatient. In 2024, you don't want to wait a few seconds for a page to load. Next.js comes with high speed. It doesn't get much faster than that. Why?
Because it strips down your home page to the bare minimum of necessary HTML and CSS, pre-renders as much as possible on the server and sends the response as fast as possible. It can even send your page with a more complex component rendered in a second step and sent after that.
With a WordPress site (just like a traditional option), it's common to wait 5–10x longer, sometimes up to 5 seconds or more, for the initial page load. To increase speed, you must make design compromises and carefully manage your plugins. A significant disadvantage here.
#7: Automation
The superpower. For me, this point alone trumps all other options. Think of your blog as one essential component of a bigger system. Connected to all the other components you work on. Social media, newsletters, Notion, personal projects - you name it.
By building on Next.js with a headless CMS, you have read and write access to your blog via an API. Which opens up endless use cases:
- Just sent out your newsletter? Upload it automatically to your blog.
- Added a new article to your blog? Automatically announce the post on social media by leveraging the content and its structured data.
- Use AI to extract the key messages of a new post and automatically create and schedule a list of social media posts.
- Update your articles based on notes in a Notion database.
This point alone deserves its own article.
#8: Don't overpay
All of the above doesn't cost money. Maybe you pay a few bucks for a custom domain and a hosting provider (although generous free tiers exist!). The price is more the time and effort required to make this a reality.
Which is a long-term investment with significant payoff.
This starkly contrasts with the commercial website builders and managed CMSs on the market. You pay for the builder, you pay for the plugins, you pay for the theme. It is like short-lived consumption.
But to be fair, cost should not drive your decision. Either way, it will be small compared to the time you invest in writing content.
#9: Demonstrate your skills
Building this kind of blog requires a combination of in-demand skills, perseverance and intrinsic motivation. If you can pull this off, it attracts people. Not only recruiters but also readers, peers, and potential new friends you will make online.
You gain trust. You gain authority. Everything that matters today and will matter even more in the future.
Don't be a copycat. Make your mark on the online world.
#10: The sky is the limit
From the basic setup, you're free to extend your website to wherever your creativity takes you:
- Want to add a community or protected areas? Add authentication.
- Want to store user data like liked articles? Add a database.
- Want to add polls/chat/stats? Build a component for it.
There's no end to it. Which is the true beauty of this approach.
Tech stack
This website here is exactly this. A personal blog and home for all my articles, newsletters, projects and co. And yes, it's a great feeling to have it created from scratch. Line by line.
The tech stack I'm using and can recommend is:
- Next.js: General framework that allows client- and server side rendering
- TinaCMS: Open source content management system
- Shadcn/ui: Exceptional UI library for basic UI elements
- Tailwind CSS: I don't want to write CSS any other way these days
- MDX: Markup language to write my content, allowing for React components within. Works great with TinaCMS.
What shall I do now?
Thanks for reading through here! If you made it this far, you now have the following options:
- Do nothing and skim through the next few articles (worst)
- Clap and bookmark to come back one day when you have more time (second-worst)
- Finally, start writing online on a platform like Medium or an out-of-the-box website builder (good)
- Commit yourself to pulling this off over the next few months (best!!!)
No matter how you decide, I'd love to welcome you to my weekly newsletter, packed with insights on my journey about option 4 and other useful tips for online builders.