---
title: "Switching From Next.js to Vite Mid-Rewrite: The Hidden Cost"
date: 2026-06-26T00:00:00.000Z
description: "Why we began a rewrite on Next.js, switched to plain React and Vite weeks in, and the new cost nobody warns you about: re-teaching your AI agents."
tags: [Next.js, React, Vite, software rewrite, frontend architecture, AI coding agents, engineering decisions, build in public, technical debt, developer experience]
canonical: https://vatsalshah.ca/blog/the-honest-pivot-nextjs-to-react-vite
---
## Introduction

**We started our rewrite on Next.js around the end of March. About seven weeks later we threw that choice out and shipped on plain React and Vite instead.** I am writing this one because the pivot is the part people hide, and the most interesting cost of it was one I did not see coming.

This is a short, honest account of a decision that went one way, then the other, and what it actually took to change course. I am writing it from our own history, so the dates are real.

**What you'll learn:**
- Why we chose Next.js first, and why we changed our minds
- What it really costs to reverse a framework decision mid-rewrite
- The new kind of migration cost that only exists when AI agents write your code

![The pivot from Next.js to React and Vite, and the hidden cost of re-teaching the AI agents](/images/blog/honest-pivot-nextjs-vite.png)

## Why we started on Next.js

When we began rebuilding our web app, Next.js was the obvious default. It is a popular React framework with a lot built in, and choosing the popular default felt safe. So at the end of March we set up the new app on Next.js and started moving features over.

Picking the safe default is a reasonable way to start. The problem is that the default is safe in general, not always right for your specific case.

## Why we changed our minds

Our web app is a single-page app that runs in the browser and talks to a separate backend. It does not need a lot of what Next.js is best at, like rendering pages on a server. We were taking on the weight of a full framework and using a small part of it.

Plain React with Vite fit what we actually are. React is the library for building the interface. Vite is the tool that builds and serves the code, and it is fast. Together they gave us a simpler setup that matched a browser-only app, without the parts we were not using. So around the third week of May we made the call, set up the Vite build, and switched.

## What it costs to reverse a decision

Changing a framework mid-rewrite is not free, and I want to be honest about that. We had already built features on Next.js, so some of that work had to be redone. We wrote a sign-off checklist for the switch so nothing fell through, and we spent real time cleaning up code and comments that only existed because of the first choice.

The lesson I take from it is not "we picked wrong." It is that the safe default deserves the same scrutiny as any other choice. We would have saved time by asking, at the very start, what our app actually needs rather than what is generally popular.

## The cost nobody warns you about

Here is the part I did not expect. By the time we switched, my AI coding agents had learned Next.js. The rules and knowledge I had given them assumed the first framework. So did the conventions they followed. The moment we changed, the agents were confidently writing code for the wrong setup.

So part of the pivot was re-teaching the agents. We corrected the written rules and knowledge from Next.js to React and Vite, and we went through and purged the stale Next.js references so nothing kept pointing the agents the old way. If we had not, they would have kept producing Next.js patterns long after the humans had moved on.

This is a new kind of migration cost. When a person changes direction, they just know. When your code is written by AI agents that follow written rules, changing direction means changing the rules too, on purpose, or the agents keep going the old way. The setup that makes the agents fast is the same setup you now have to migrate. I wrote about how that agent setup works in [from prompts to an AI engineering team](/blog/from-prompts-to-an-ai-engineering-team), and about the rewrite itself in [rewriting a live web app from Angular to React in 7 weeks](/blog/rewriting-angular-to-react-with-ai-agents).

## What I would tell you

- The popular default is a starting point, not an answer. Ask what your app actually needs before you commit.
- A mid-course pivot is recoverable. Write a checklist for the switch and clean up what the first choice left behind.
- If AI agents write your code, your conventions are part of your stack. When you change direction, migrate the agents' knowledge on purpose, or they will keep building the old way.

<FAQSection
  title="Frequently Asked Questions"
  questions={[
    {
      question: "Why did you start on Next.js?",
      answer:
        "It was the popular default for a React app, and choosing the popular default felt safe. We set up the new app on Next.js at the end of March and began moving features over.",
    },
    {
      question: "Why did you switch to React and Vite?",
      answer:
        "Our web app runs in the browser and talks to a separate backend, so it did not need much of what Next.js is best at, like server-side rendering. Plain React with Vite was a simpler setup that matched a browser-only app, without the parts we were not using.",
    },
    {
      question: "How long were you on Next.js before switching?",
      answer:
        "About seven weeks. We started around the end of March and made the call to move to Vite around the third week of May.",
    },
    {
      question: "Was the switch expensive?",
      answer:
        "It had a real cost. Some features built on Next.js had to be redone, and we spent time cleaning up code and comments that only existed because of the first choice. We wrote a sign-off checklist for the switch so nothing fell through.",
    },
    {
      question: "What was the unexpected cost?",
      answer:
        "Our AI coding agents had learned Next.js. Their rules and knowledge assumed the first framework, so after the switch they kept writing code for the wrong setup until we corrected them.",
    },
    {
      question: "How do you re-teach AI agents a new framework?",
      answer:
        "You change the written rules and knowledge they follow, on purpose. We corrected our conventions from Next.js to React and Vite and removed the stale Next.js references, so nothing kept pointing the agents the old way.",
    },
    {
      question: "Do you regret starting on Next.js?",
      answer:
        "Not exactly. The lesson is not that we picked wrong, it is that the safe default deserves the same scrutiny as any other choice. We would have saved time by asking what our app actually needs at the very start.",
    },
    {
      question: "When should you choose Vite over Next.js?",
      answer:
        "When your app is a single-page app that runs in the browser and does not need server-side rendering, plain React with Vite gives you a simpler, faster setup. If you rely on server rendering and routing built into the framework, Next.js earns its weight.",
    },
  ]}
/>

## Further Reading

- [Rewriting a live web app from Angular to React in 7 weeks](/blog/rewriting-angular-to-react-with-ai-agents)
- [From prompts to an AI engineering team](/blog/from-prompts-to-an-ai-engineering-team)
- [How we built AI chat, from one file to an agent that acts](/blog/how-ai-chat-evolved-from-one-box-to-an-agent)