Updating My Personal Website

New Year, New Me - New Website?

As I embark on my personal journey of 12 Months of Learning, I realized my website needed a significant overhaul. My old website, built on Next.js 13, React 18, and Nextra, felt outdated and in need of a refresh. Trying to update Nextra to version 2 was brutal and proved to be more trouble than it was worth, with numerous breaking changes between major versions. After some research, I decided to build a new website from the ground up with an updated tech stack. This post will detail the changes I made and the decisions that shaped this website and blog.

Hello Fumadocs and Goodbye Nextra 👋

Switching away from Nextra was the single biggest change. While Nextra served its purpose initially, it wasn’t going to cut it anymore. Many Google searches later, I discovered Fumadocs, a highly customizable alternative that exceeded my expectations. Fumadocs offers an elegant set of UI components for MDX files, making content creation much more enjoyable. Its robust documentation made the migration process smooth and even enjoyable. The flexibility and polish Fumadocs brings to the table were exactly what I needed to build a site I was proud of and believe can stay relevant for quite some time before the next big rewrite.

Next.js 15: A Big Step Forward 🚀

With the upgrade to Next.js 15, I said goodbye to the Pages Router and embraced the App Router. While initially controversial, the app router has won me over completely. Its ability to leverage Server Components allows for faster time-to-interactive (TTI) performance, and the developer experience is simply top-notch. The inclusion of the now stable Turbopack 🦀 in this release is a game-changer to local development as my dev server is faster than ever, with noticeable improvements in both startup and refresh times.

React 19: The Evolution Continues 🔄

Although many of the features, like Server Components, had already been part of my workflow through Next.js, the stable release brings improvements across the board. One feature that stood out to me was the enhanced error reporting for hydration errors, which has made debugging far less tedious. Actions, another long-awaited feature, are now stable. While I haven’t fully explored their potential yet, I’m excited to see how they can simplify server-side interactions in upcoming projects.

Vercel: The Deployment Powerhouse ⚡

Vercel provides an effortless deployment process, specifically designed for Next.js applications. With just a few clicks, my website is live and accessible to the world—all without the hassle of server management. Their generous free tier makes it an obvious choice for small to medium projects. In addition to deployments, Vercel's observability tools have been a game-changer. I ran into an issue with my Spotify integration and was able to pinpoint the issue immediately. While the pricing beyond the free tier can be steep, for a portfolio or blogging website like this, Vercel's value and convenience remain unmatched.

Tailwind CSS: The MVP of Styling 🌟

At this point, Tailwind feels indispensable. Its utility-first approach to styling makes development efficient and enjoyable. I have actually learned so much about how to build interactive and responsive websites through Tailwind. I could not imagine going back to Bootstrap 🤮.

Cleaning Up the Codebase 🛠️

When I first built my website, I was still finding my footing with React and Next.js. Over the past several years, I have significantly enhanced my development capabilities and was able to leverage those lessons during the rebuild. The result? A faster, cleaner, and a maintainable codebase that I’m genuinely proud of.

Looking Ahead 🔮

This website redesign is more than just a technical upgrade. It's the foundation for an exciting year ahead. With my 12 Months of Learning initiative, I plan to leverage this platform to document my journey, share insights, and connect with others. The new tech stack not only supports my current needs but also sets the stage for future growth. If you’re considering upgrading your own website, I can’t recommend Fumadocs enough. The source code for this website is available on my GitHub.