Creating a blog using Nextjs in 2 days (And why you shouldn't to do it)

Preetham

Preetham

· 8 min read
Nextjs

Creating a blog using Nextjs in 2 days

And why you probably shouldn't to do it

The motivation

Creating a website can be a daunting task, especially if you are not familiar with the tools and frameworks required to do so. I recently decided to build a portfolio website using plain vanilla JavaScript, Bootstrap CSS, and HTML. So I asked ChatGPT for a boilerplate (Just the boilerplate okay?) and got started right away.

I used the code and completed portfolio. It looked very simple but it was enough. (You can view it here). Then I stumbled on this template by Web3Templates called Stablo Blog Template. And man! It was very impressive. At first, I was excited to use this template as it had all the features I wanted, including a great design, a responsive layout, and built-in SEO optimization. However, when I started looking at the code, I was overwhelmed by the complexity of the template. The code was confusing, and I had a hard time understanding how the components were designed and how the data flow process happened.

Here's what happened next

After a few hours of struggle, I realized that the template was built using the JAMStack architecture. This architecture refers to a web development approach that uses JavaScript, APIs, and Markup to build websites. I also discovered that the data for the website was fetched from a Content Management Service (CMS) called Sanity, which was accessed through an API. With this understanding, I began to break down the template into smaller components and tried to understand how they worked together. I also spent some time reading the documentation for Next.js, React, and Sanity to gain a better understanding of their individual roles in the development process.

A bird’s eye view of what I actually did would be:

Step 1: Break Down the Template into Smaller Components

The first step I took to tackle the complexity of the Stablo template was to break it down into smaller components. By doing this, I could gain a better understanding of how the different pieces of the website fit together.

I started by analyzing the overall structure of the template and then identifying the main components, such as the header, footer, blog posts, and navigation bar. Once I had identified these components, I then looked at the code for each one and tried to understand how they worked.

I found that this approach helped me to get a better sense of how the different components interacted with each other and what role each one played in the overall structure of the website.

Step 2: Understand the JAMStack Architecture

As I delved deeper into the template, I realized that it was built using the JAMStack architecture. This architecture is based on three core technologies: JavaScript, APIs, and Markup. JavaScript is used to create dynamic user interfaces, APIs are used to access data from external sources, and Markup is used to structure the content of the website.

To better understand how the JAMStack architecture worked, I read up on the topic and looked at some examples of JAMStack websites. I found that this architecture has several advantages, including fast load times, improved security, and the ability to scale easily.

Additionally, I learned that JAMStack websites are built using static site generators, which generate HTML, CSS, and JavaScript files that can be served directly to the client without the need for server-side processing.

Step 3: Get Familiar with the Sanity CMS

The Stablo template used the Sanity CMS to manage the content of the website. I had never used Sanity before, so I spent some time getting familiar with the platform.

Sanity is a headless CMS, which means that it provides a content management interface but doesn't dictate how the content is displayed on the front-end of the website. Instead, the content is accessed through APIs and can be used to generate dynamic content on the client-side.

To get started with Sanity, I created a new project and then defined the schema for my content. I found that the Sanity documentation was very helpful and provided detailed instructions on how to set up a project and define a schema.

Once I had defined the schema, I then created some sample content and used the Sanity API to access it from my website. I found that the Sanity API was straightforward to use and allowed me to easily retrieve and manipulate the content from my website.

Step 4: Use Next.js to Create a Dynamic Website

Next.js is a popular framework for building server-side rendered (SSR) React applications. I chose to use Next.js for my website because it offered several advantages, including improved SEO, faster load times, and better user experience.

To get started with Next.js, I created a new project and then added the required dependencies, including React, Next.js, and Sanity.

Next.js provides a robust file-based routing system (now that really changed my life) that allowed me to create dynamic pages for my website. I used the pages directory to define the routes for my website and then created React components to render the content.

Step 5: Tailor the Template to Suit My Needs

With a better understanding of the components, the JAMStack architecture, the Sanity CMS, and the Next.js framework, I was able to customize the website. I added my own content on webpages, changed the name of the website and did a few more changes on the metadata. Voila! There you have it, a complex web application that actually works!

Image

And why shouldn't this work?

Creating a blog using Next.js in just two days may seem like an impressive feat, but it's important to understand the potential pitfalls of rushing through a project like this. While it's certainly possible to use pre-built templates and tools to create a blog quickly, there are many reasons why you might not want to do this.

Firstly, it's important to consider the purpose of your blog. Are you creating it just for fun, or is it part of a larger project or business venture? If you're creating a blog for a serious purpose, rushing through the development process can lead to a poorly-designed website that doesn't meet your needs or attract the right audience.

While templates and pre-built tools can be helpful for getting started quickly, they can also limit your creative control and customization options. If you're not careful, you could end up with a website that looks like a generic clone of many other sites out there.

Also rushing through the development process can also lead to technical issues and mistakes. If you don't take the time to carefully test and debug your code, you may end up with a website that is prone to crashes, errors, and other problems that could harm your reputation and frustrate your users.

In essence, while it's certainly possible to create a blog using Next.js in just two days, it's important to carefully consider the purpose of your blog and the potential downsides of rushing through the development process. By taking your time, testing your code thoroughly, and focusing on customization and creativity, you can create a blog that works as expected without giving any surprises!

Preetham

About Preetham

Hi, I'm Preetham, a student pursuing a Bachelor's degree in Artificial Intelligence and Machine Learning. As an aspiring data scientist, I'm passionate about exploring the cutting-edge of machine learning and AI research. I believe that the most effective way to learn is by teaching others, which is why I decided to start this blog series.

Copyright © 2025 . All rights reserved.
Made using Web3Templates· Github
Powered by Vercel