How I upgraded my old Next.js site with Claude Code
I bought the template for this site in 2023 and then mostly ignored it. This year I finally sat down to upgrade my old Next.js site with Claude Code, and moving it to a modern stack took about two hours.
Here's where the site came from, why I bothered, and what it was like handing the work to AI.
Where did this site come from?
It started as a Tailwind template I bought in 2023. Tailwind was the hot new thing then, and I paid for a lifetime membership to their templates (Tailwind UI at the time, now Tailwind Plus). This site is built on one of them, Spotlight.
I built it, put it on my domain, and left it there. Other work was more pressing, and for a long time the site just sat.
Why rebuild it now?
Because I wanted two things from it that it couldn't give me as it was.
The first is a place to pitch my development work to people who need a website, analytics or AI set up properly. It should be built the way I build for clients, so it's proof as well as a pitch.
The second is a playground. Some ideas are too far out to try on a regular business's website. This is where I try them first. Right now that's AI-generated hero videos, made with Blender and Higgsfield.
What changed in the upgrade?
The design stayed. Almost everything underneath it changed:
- Next.js 13 to 16, the pages router to the App Router, JavaScript to TypeScript
- Tailwind 3 to 4, with the same Spotlight design
- Contentful and MongoDB to Firestore, read on the server through the Admin SDK
- Vercel to Cloud Run behind Firebase Hosting, deployed by GitHub Actions
| Before | After |
|---|---|
getStaticProps | async Server Components |
| Contentful rich text | MDX in Firestore |
Reading every article is now one small server function:
export async function getAllArticles(): Promise<ArticleMeta[]> {
const snap = await db.collection("blog/posts/items").get();
return snap.docs.map(fromDoc).filter(isPublished);
}
The site now runs on the same stack as my client projects. The case study for this site has the full list, including the Lighthouse checks that run on every change.
How long does it take to upgrade a Next.js site with Claude Code?
For mine, the stack took about two hours. That was roughly two prompts from me, plus a few questions Claude Code asked along the way that I had to answer.
The content took longer. It was about a day before the words and the design were in a place where I was happy to publish. That part was mine to do, and it should be. Claude can write a services page, but it can't decide what I want to be known for.
Why didn't it turn into vibe-coded spaghetti?
Because I knew where it had to end up before I started.
Next.js, Google Cloud, Firebase, Tailwind and Claude are what I build with every day. So the target was the exact setup I already run for other projects. When Claude Code made a choice, I could tell whether it was the right one, and when it asked a question, I had an answer.
These AI workflows are remarkable if you already have some development experience and can steer. Without that, it's easy to accept every suggestion and end up with code nobody understands, including the AI that wrote it.
What's next for the site?
More writing, and more experiments.
Articles now go up through an MCP server, so I can write and publish by asking Claude. I wrote about how that MCP server works. The hero video experiments will show up here once they're good enough to show.
Frequently asked questions
Can you take my old website and rebuild it so AI can run it?
Yes. That's what I did with this site, and it's the same work I do for clients. Your site moves onto the stack this one runs on, and changes, new pages and new posts can then be made by asking an AI instead of waiting on a developer.
How quickly can changes be made after that?
Usually in the same sitting you ask for them. On this site I publish articles by asking Claude, and the server checks the rules before anything goes live. Bigger changes still take thought, but trying an idea and throwing it away gets cheap.
Do I need to be technical to run it?
No. Once it's set up, you ask for changes in plain English, and a person approves them before they go live. The technical part is the setup, and that's the part I do.
Do I have to give up my current design?
No. This site kept its Spotlight design through the whole upgrade. You can keep yours, or use the rebuild as the moment to refresh it.
If you have an old site that needs the same treatment, that's part of the website work I do.