After using the same website design for years, I decided it was time to revamp my personal blog. I wanted to create a modern, responsive design that would make my content stand out. After doing some research, I settled on Next.JS as my web framework of choice.
In this post, I'll walk you through the process of rebuilding my blog with Next.JS. I'll cover everything from setting up the initial project to deploying the finished website. Along the way, I'll share some of the challenges I faced and the solutions I came up with.
If you're considering using Next.JS for your own website, or you're just curious about the process of building a website from scratch, this post is for you. Let's dive in!
Challenges with the Previous Blog Hosted on ASP.NET
Before rebuilding my blog with Next.JS, I had my blog hosted on ASP.NET Core and an Azure Web App. While ASP.NET Core is a powerful web framework, my approach was limited as I wrote each blog post as a view and had a lot of duplicate code. It was hard to maintain, and deployment took much longer. Here is what the old blog looked like:
Using NVM to Manage Node Versions
One of the challenges I faced when rebuilding my personal blog with Next.JS was ensuring that I was using the correct version of Node.js. Next.JS has specific version requirements, and I wanted to make sure I was using a version that was compatible with Next.JS.
To manage my Node.js versions, I decided to use NVM (Node Version Manager). NVM is a command-line tool that allows you to easily switch between different versions of Node.js. It's especially useful when you're working on multiple projects that require different versions of Node.js.
To get started with NVM, I installed it on my system using the installation instructions on the official NVM GitHub page. Once installed, I was able to use NVM to install and switch between different versions of Node.js.
For example, to install Node.js version 18.12.1, I used the following command:
nvm install 18.12.1 nvm use 18.12.1
Getting Started with Next.JS
To get started, I created a new Next.JS project using the command line interface (CLI). Next.JS is built on top of React, so if you're already familiar with React development, you should find the transition to Next.JS relatively straightforward. Here is the command I used:
npx create-next-app@latest mywebsiteproject --typescript
I decided to learn and use TypeScript, but you can skip that if you prefer.
One of the things I liked about using Next.JS was the built-in server-side rendering (SSR) feature. This means that my website would be rendered on the server before being sent to the client, which can improve performance and SEO. Next.JS also supports static site generation, which can further improve performance and reduce the load on the server.
Designing the Layout
Next, I designed the layout for my new blog. I wanted a clean, minimalist design that would put the focus on my content. I used Tailwind CSS to create the layout, which made it easy to create responsive designs that look great on any device. To install and configure Tailwind you can follow this guide. Relevant commands:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
For the inspiration of my design, especially navigation and learning Tailwind, I followed along this video to get a static site up and running.
Building the Content with GraphCMS and GraphQL
With the layout in place, I wanted to leverage a Content Management System to manage blog posts and content. I found this great video that explained how to use GraphCMS (now Hygraph) which is built on GraphQL and React. The Hygraph platform has a free tier and seems like a great fit for a personal site. In the video they show how to create your schema, content, and build your queries to get content. I also found this blog post as a good written companion to the video. A couple of supporting libraries used in the video and to interact with GraphQL:
npm install graphql graphql-request html-react-parser moment
The only issue I have at this time is during build time I run into Hygraph throttling which manifests as a "Too Many Requests" error. Usually, you can just rebuild or redeploy, and the issue goes away. Longer term, I'm thinking of adding a caching layer that I have more control over to get around this issue.
The video above has a very basic approach to parsing the html content and converting it. I found this article on a GraphCMS component to handle the heavy lifting. To use it, here is the command:
npm install @graphcms/rich-text-react-renderer
After you get that running, I noticed that Tailwind CSS removes formatting for bullets, lists, and other common content. This is great for fine control of styling, but your content that is expecting "normal" use of common html is removed. Fortunately, they have a solution. To install I used:
npm install -D @tailwindcss/typography
Deploying the Website
Finally, it was time to deploy the finished website. I chose to deploy to Vercel, which is a cloud platform that specializes in Next.JS deployments. Deploying to Vercel was a breeze, thanks to the built-in integration with GitHub. Check out the documentation here.
Once deployed, I was able to enjoy the benefits of Next.JS's SSR and static site generation. My website loaded quickly and performed well.
Coveo Search
Since Coveo is a technology that I'm working with often, I decided to leverage it for search. Check out my blog post on leveraging Coveo Atomic UI for site search.
Conclusion
Overall, I'm really happy with the way my new blog turned out. Using Next.JS made the process of rebuilding my blog both fun and easy. If you're considering using Next.JS for your own website, I highly recommend it.
I hope you found this post helpful.