What I Learned from Converting My 6-Year-Old Create React App Personal Website to Next.js

#webdev #nextjs #react #javascript

You know that feeling when you open an old project you haven’t touched in years? Yup, that was me.
Six years ago, I Built my personal project website using Create React App (CRA). It was one of the first “serious” React projects I made, back when I was still figuring things out. At the time, it worked, it looked decent, and I was proud of it. After I'm landing job, I practically abandoned it.

Fast-forward to now, I'm a very different Developer. I’ve worked on teams, led frontend projects, built Chrome extensions, and shipped products. Then I looked back at my old portfolio, I realized the code quality is terrible.

I decided to rebuild it. Not patch it. Not update a few dependencies. But completely migrate it from CRA to Next.js, using everything I’ve learned since then.

The Problem: My Own Lagacy code

Because this was my personal project, every line of code was like a note from my past self. Some were sweet. Others were… a little embarrassing. Here's what I was dealing with:

Old React patterns (class components, remember those?)
Weird folder structure
Packages that wouldn’t update due to breaking peer dependencies
Webpack overrides I no longer remembered writing
styled-components everywhere
classnames used inconsistently

The biggest red flag? I couldn’t even upgrade some packages. The dependency tree was so tangled that running npm update broke the entire build. Some libraries hadn’t been maintained in years. I tried to update it. I really did. But eventually I admitted: It would be faster and cleaner to rebuild this from scratch.

The Rebuild: Next.js with App Router

Instead
Instead of fighting against the old setup, I took a deep breath and nuked the repo (after backing it up, of course).

I started a new project using Next.js 14 App Router, and committed to doing things the modern way:

File-based routing
Server components where it made sense
Layout.tsx + loading.tsx for better structure and UX Initially, I struggled with Next.js file-based routing, but I eventually learned and got used to it. Because this was my own site, I could experiment freely. No stakeholders. No pressure. Just the joy of building again.

Tailwind Made It Fun Again

The original project used custom SCSS and BEM conventions. Nothing wrong with that... but maintaining that across dozens of components was painful.

So I switched to Tailwind CSS. The latest version, with JIT enabled, custom themes, and all the goodness.

The original project used custom SCSS and BEM conventions. Nothing wrong with that... but maintaining that across dozens of components was painful.

I switched to the latest version of Tailwind CSS, embracing its JIT compiler, custom themes, and other powerful features, with the help of a ChatGPT agent for CSS rewrites.

What I Learned Along the Way

Here’s the fun part. Migrating this beast taught me a lot—not just about Next.js, but about dev life in general.

1. Don’t Be Afraid to Start Over

Trying to patch legacy code feels noble, but sometimes it's a waste of time. Starting fresh let me rethink architecture, remove dead code, and use modern tools without guilt.

2. The App Router Makes You Think in Components Again

I love how app/ forces you to structure code cleanly: layouts, loading states, nested routes, etc. At first it was a bit weird. Now it makes perfect sense.

3. Legacy Doesn’t Always Mean Bad, But It Usually Means Slow

Older code isn't necessarily terrible. In fact, this app still worked. But maintaining it was like fixing a bike with a spoon. You can, but why would you?

Final Thoughts

Migrating a client project is one thing.

Migrating your own project, the one you built when you were just starting out—is something else entirely. It’s not just technical work; it’s emotional. You see how far you’ve come. You laugh at your old decisions. And you get a chance to write cleaner code, not to impress anyone else—but for your own future self.

If you’ve been putting off updating your personal site… maybe this is your sign.

Start clean.
Try something new.
Use it as a playground to sharpen your tools.

You’ll learn more than you think.

The personal website is: https://dwidarma.codes