In this tutorial, I’ll teach you how to use Next.js and Sevalla to build and deploy your own Next.js blog.
But first, let me answer your likely question: “Why host a blog yourself when there are hundreds of blogging platforms available? “
One answer: Next.js.
Table of Contents
What is Next.js?
Next.js is a web development framework built on top of React. While React is a library for building user interfaces, Next.js adds extra features to make building websites and web applications easier and faster.
Next.js gives you full control. You own your content, your design, and your SEO strategy. Unlike Medium or Substack, you’re not limited by platform rules or branding. You can optimise every part of your blog, from how fast it loads to how it looks on Google search.
Next.js isn’t just a tool to build a blog. It’s a platform to build your entire brand. That’s why developers and indie hackers love it.
What is Sevalla?
Sevalla is a Platform-as-a-service provider that I have recently fallen in love with. Built by the team behind Kinsta, the popular WordPress hosting platform, Sevalla combines powerful features with a smooth developer experience. They offer application hosting, database, object storage, and static site hosting for your projects.
Unlike platforms like Heroku, which provide almost all features via additional integrations, Sevalla gives you exactly what you need to build and deploy an app to your users.
Imagine if someone took just the essential features from cloud platforms like AWS or Azure and put them into a single, easy-to-use dashboard. That’s exactly what the Sevalla admin panel has. A clean, simple interface with everything you need, and nothing you don’t.
In a nutshell, Sevalla handles all the heavy lifting of deploying and scaling your app, so you can focus entirely on building it.
Building and Deploying a Next.js Blog
Now let’s build and deploy our Next.js blog. We don’t have to build one from scratch – there are many templates available for us to use, like this one.
We will do three things.
-
Clone the repository and set up the blog on our local machine.
-
Deploy the site to Sevalla
-
Add a custom domain.
Building the blog
First, fork the Next.js blog repository.
Once you have forked it, clone it to your local machine.
git clone <repository url>
Once you have cloned the repository, go into the directory and run npm install . Make sure you have the latest Node.js and Next.js installed on your machine.
Now let’s run the blog on our machine. The command is npm run dev . Once the server is running, go to localhost:3000 to view the site.
You should see the above page. Now let’s add our own blog post to it. Go to the content/blog directory. Every page in the content directory is your blog post, and you can use Markdown to style it. Save the file with the extension .mdx
Add the following text (the first part is the metadata for the blog to understand the title and date of publication):
---
title: "My New Post"
date: 2025-07-07
---
Welcome to my first blog post using Next.js and MDX!
Reload the home page, and you should now see two posts – the default post and your new post.
So every time you want to publish a new article, you create a new page using Markdown. It’s that simple.
Commit this new file and push it to your repository.
git add .
git commit -m "new post"
git push origin main
Deploying the blog
Now create an account on Sevalla (use GitHub login so that you don’t have to re-authenticate again).
Once you log in to Sevalla, you’ll see the Static site option. Click on it to create a static site.
Like other hosting providers, not all Sevalla products are free, but it comes with generous free credits. Unless you have a reasonable number of users that access your blog, you will not incur any costs for blogs/small projects. But when it comes to static sites, you can host up to 100 sites completely for free.
Select the repository from the list. Check the “Automatic deploy on commit” option. So every time you push code, Sevalla will automatically deploy your new post to the server.
In the “build settings” page, keep the defaults. Click “Create site”. In a few minutes, the app will be pulled from GitHub, deployed to a server, and you should see the button visit site .
If you visit the site, you should see the below page:
Yay! Your blog is live. You can also see detailed build logs under the “deployments” tab and see if there are any issues deploying your app.
Adding a custom domain
Great. For the last step, let’s add a custom domain to our blog.
Go to the “domains” tab, and click “add domain” under custom domains. I’ll be using a subdomain next from my private domain manishshivanandhan.com, but the instructions are the same for root domains as well.
Once you click “add domain”, Sevalla will give you the instructions to add the TXT records for verification and CNAME/A records for pointing the new site to your domain.
Once these are done on your domain provider, check back after a few minutes.
Hooray! You’ve created your own Next.js blog. Here is the sample site I built for this project – http://next.manishshivanandhan.com
Conclusion
And that’s it! Your very own Next.js blog is now live on Sevalla.
In just a short time, you’ve gone from cloning a template to publishing your first post and deploying it to the world with a custom domain. With Next.js, you get full control over your content and brand, and with Sevalla, deployment becomes effortless and smooth.
Remember, every time you want to publish a new article, all it takes is creating a simple markdown file and pushing your code. Sevalla handles the rest, so you can focus on what truly matters: writing great content and building your personal brand.
Hope you enjoyed this article! I’ll be back soon with more tutorials on building with Next.js. Feel free to connect with me on LinkedIn to stay in touch.
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & MoreÂ
