Voice by ElevateBox — India's best conversational voice agentTry it free →
ElevateBox

Engineering

Migrating a React App to the Next.js App Router

The migration is incremental by design. Doing it route by route keeps the app shippable throughout.

6 September 2025 · 4 min read

Both routers coexist

The App Router and Pages Router can run in the same application, which means you migrate a route at a time and ship continuously.

Start with a low-risk leaf route to learn the patterns.

Server components change data fetching

Data fetching moves into the component, and much client-side state management becomes unnecessary. Resist porting the old patterns unchanged.

Mark client components explicitly and keep them at the leaves of the tree.

Caching is the real learning curve

Request memoisation, the data cache, and the router cache each behave differently. Most migration surprises come from here.

Make caching explicit per route and verify with real requests rather than assuming.

Where to go from here

If you are weighing a framework migration for an upcoming project, the useful next step is usually a short scoping conversation rather than a longer article. Bring your constraints — budget, timeline, existing systems, and the team you already have — and the decision usually resolves itself in an hour.

We run these as a fixed-scope discovery session with a written recommendation at the end, including the cases where our advice is that you do not need us.

Working on something like this?

Send us the brief. We will tell you what we would build, what we would cut, and roughly what it costs.

Talk to us

Start work with us

Tell us what you are building. We will come back with scope, an honest range, and the parts we think you should cut.