Next.js Development vs Production Mode: What Changes After `next build`

The Next.js dev vs production split comes down to what each mode optimizes for. Development mode is what you use while writing code, and production mode is what you deploy after running next build. The same app behaves differently in each.

The two modes at a glance

The development server favors instant feedback, while the production build favors fast page loads. A page that refreshed instantly in development is prerendered and minified in production.

What development mode gives you

next dev starts a server with hot reloading, so editing a file updates the browser without a full rebuild. It writes its output to .next/dev, which lets it run alongside a production build without conflicts.

Turbopack is the default bundler, and error overlays point at the exact component and line when something throws. Fast Refresh preserves component state while a module swaps.

What changes after next build

next build compiles the app for production. It tree-shakes unused code, minifies JavaScript and CSS, and prerenders every route it can.

Type checking runs in parallel, and each route is classified for prerendering before anything is written. The output lands in .next, and next start serves it.

bash

npm run build
npm run start

After these two commands, the app serves on port 3000 from the optimized build. Visiting a page now returns prerendered HTML where possible, instead of rebuilding it on every request.

Caching and rendering differ

Development mode disables caching so you always see fresh changes, and it re-renders pages as you edit them. Production mode prerenders static routes at build time and may cache data, depending on your configuration. With Cache Components enabled, production routes are split into a static shell and streamed dynamic parts.

One thing stays the same across modes: both use Turbopack by default and both respect the routes in your app directory. The platform you deploy to adds another layer on top of production behavior, so self-hosting can differ from a managed host.

For the dev server's flags, read Running the Next.js Dev Server. To read the route table printed by the build, read Understanding next build Output.