Under every next dev and next build sits a toolchain: a bundler, a compiler for JSX and TypeScript, and a pipeline that pre-renders routes. Since Next.js 16 that bundler is Turbopack by default, and the React Compiler can take over manual memoization. After this lesson you will be able to configure Turbopack, enable the React Compiler, read the build output, and choose the right output mode for your deployment target.
Turbopack is a Rust-based, incremental bundler built for Next.js. It is the default for development and production builds, so no flag is required. Its benefits are fast cold starts, updates that scale with the change rather than the app, and a persistent cache.
next build --webpack # opt back into webpack if a legacy plugin needs it
next typegen # generate route types without a full buildConfiguration lives under the turbopack key in next.config.ts, as in the sample at the top of this lesson:
resolveAlias maps import specifiers to paths or packages.rules attaches webpack-compatible loaders to file globs, for example turning SVGs into React components.resolveExtensions changes which extensions are tried when an import has none.Custom webpack() functions in next.config.ts are ignored by Turbopack; most of them translate directly into rules or resolveAlias.
Components re-render whenever their parent does, so codebases fill up with useMemo, useCallback and React.memo. The React Compiler analyses your components at build time and inserts equivalent memoization automatically, provided the code follows the rules of React (pure render, no mutation of props or state).
npm install --save-dev babel-plugin-react-compilerSet reactCompiler: true and remove hand-written memoization gradually, checking the React DevTools profiler. The compiler skips components that break the rules rather than failing, so run the react-hooks ESLint rules to surface them.
next build compiles, type-checks and pre-renders. The route table it prints tells you how each route will be served:
Route (app) Size First Load JS
┌ ○ / 1.2 kB 98 kB
├ ● /blog/[slug] 3.1 kB 104 kB
├ ƒ /dashboard 5.4 kB 121 kB
└ ƒ /api/orders 0 B 0 B
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML using generateStaticParams
ƒ (Dynamic) server-rendered on demandA route you expected to be static showing ƒ usually means a request-time API or an uncached fetch slipped in. Since Next.js 16, linting is no longer part of next build; run ESLint (or Biome) as a separate CI step.
| output value | Result | Deploy to |
|---|---|---|
| default | .next/ folder for next start | Vercel, Node.js hosts |
| "standalone" | .next/standalone/ with a minimal server.js and only the needed node_modules | Docker, any Node.js server |
| "export" | Plain HTML, CSS and JS in out/ | Static hosts and CDNs |
Static export disables anything that needs a server: dynamic rendering, non-static Route Handlers, the proxy, Server Actions and image optimisation (without a custom loader). It suits documentation and marketing sites; everything else uses the default or standalone modes.
typedRoutes: true so Link and router.push reject unknown paths at compile time.next.config.ts small; every experimental flag is a future migration.How do you use webpack instead of Turbopack for a production build in Next.js 16?
next dev and next build; configure it under turbopack in next.config.ts.reactCompiler: true adds automatic memoization for components that follow the rules of React.○, ●, ƒ) reveals how each route is rendered; lint separately with ESLint or Biome.output: "standalone" targets containers and output: "export" targets static hosts, with server features disabled.typedRoutes and run next build in CI to catch mistakes before deployment.Next lesson: Deploying Next.js and Best Practices — take the build to production on Vercel or a Node.js host.