How I made a personal Next JS Blog in 2022

I created my first portfolio website in the year 2019. Back in those days, I was just getting started with Web development and it was thrilling to have my own personalized space on the internet. I did have my share of experiences with the IT industry, however, I wanted to transition into a proper developer role.

Hence, during the same year, I purchased a lot of Udemy courses (most of which are yet to be completed) and decided to level up my web development skills. Learning all those new coding practices I decided to revamp my portfolio to attract potential employers to find my work. That's when I came up with this.

This website did well on my resume, however, it was made using Vue JS and hence scored the 3rd rank when searched for "Shahid Shaikh" on Google. 3rd rank on the 2nd page.

It was time for a change.

I decided to create a new portfolio website while keeping the following things in mind:

1. It is supposed to be SEO friendly
2. Support for blogs
3. Pleasing to the eye
4. Learning new tech while coding it

Inspiration

I have drawn inspiration for this blog from several amazing individuals around the internet. The resources shared by these people have helped me with the design, code and even the strategies used for creating a proper blog. Here's a list of, go check out their work as well: Josh Comeau, Lee Robinson, Delba, Yasin , Takuya Matsuyama, Paco Coursey, Anthony Fu, Dale Anthony & Brittany Chiang

Tech Stack

For me, SEO was the priority with this blog. Hence, I had 2 choices: Nuxt JS or Next JS. I have been using Vue JS for most of my projects for 2 years now and Nuxt seemed like an easier switch. However, I've been trying to get my hands on React JS and hence decided to go with Next JS as a practice/experiment ground. In the end, I went ahead with the following:

1. Next JS
2. Fauna DB
3. MDX
4. Tailwind CSS
5. Vercel

Next JS

NextJS is a React-based Framework to build modern websites. It caught my attention when every other person that I've been following on Twitter kept talking about it. It didn't take me long to realize the benefits it brings to the table.

• File system routing
• API Routes
• SSR and SSG Support
• Image Optimization

When I had started learning React, it felt very tedious as I was coming from Vue. However, using Next JS has been a really fun experience so far. Combine it with Vercel and you have enough to get your portfolio up and running in no time.

Fauna DB

I wanted to figure out a way to find the number of people visiting my blogs. Yes, I could have used Google Analytics and other tools, however, creating my hit counter felt more exciting. However, this brought up a new challenge: Where do I save the data?

Searching around the web I stumbled upon this really good blog written by Josh: Building a Modern-Day Hit Counter. This is what introduced me to Fauna DB. They provide a dashboard where I can see and edit the data as and when required. As of right now, it is fulfilling the requirement. However, I do wish to explore MongoDB in the coming future as I add more interactivity.

MDX

When I decided to create a blog within the website, I was thinking of creating these multiple individual blog components. I have tried this approach before and I couldn't write past 10 lines because of the constant opening and closing of HTML Tags.

Lee Robinson introduced me to MDX: Improving My Next.js MDX Blog. This is exactly what I needed. The amount of friction that MDX removes, would help me to focus on writing and when I need some interactivity in between these blogs, I can easily insert regular react components.

This is your normal markdown text and below is the custom react components

<your-component-name text={'Hello World'}/>

To be precise I am using MDX Remote for this blog.

Tailwind

Tailwind CSS is a utility-first CSS framework. I was introduced to it when I had started working for my current company. It was fairly easy to understand and reduced the friction of creating/managing CSS Files (I'm still using a few CSS files though).

Tailwind has vast and well-organized docs. This makes integrating Tailwind with your setup very easy. Like in this case, the Tailwind team has listed down all the steps required to integrated Tailwind with Next JS: Install Tailwind CSS with Next.js

Vercel

Vercel is a platform to host your frontend frameworks and static websites. Previously I was using Netlify to host my websites. Now that I was switching to Next JS, Vercel seemed like a better choice as they are the creators of Next JS.

Using Vercel was a really fun experience as it pulled all my repo via Github and enabled instant deployment when I pushed anything to the master branch. I also loved the way Environment Variables are handled on Vercel. Netlify and Vercel have reduced the complexities of hosting our fun side projects over the internet.

The Future

I don't want to stop with what I have done with this blog. I want to constantly improve it concerning design, technology and coding practices that I learn in the upcoming years. For now, I have a few things in mind:

1. New Components for better describing the content to the user
2. Like Button support
3. More micro interactivity
4. Integration with 3rd party services (Spotify, Github, etc)

As of right now, I am content with what I have come up with and the things that I have learnt along the way. And also, since it's my first blog ever on the internet, I thank you for reading this far 💝.

If you have any queries or suggestions, feel free to reach out to me via any of the below means. Thank you!