▲ Next.js Intermediate

How does the Next.js build process work?

Why Interviewers Ask This

This question targets practical, hands-on experience with Next.js. Interviewers want to see if you've worked with these concepts in real projects, not just read about them. Strong answers include concrete examples.

Answer

The Next.js build process (next build) compiles and optimizes the application for production: Build output directory: .next/ contains all build artifacts. Build steps: (1) TypeScript compilation and type checking; (2) ESLint linting; (3) Static analysis — Next.js analyzes each route to determine: static (pre-render at build time), ISR (pre-render + revalidation), or dynamic (render at runtime); (4) Static generation — Next.js runs generateStaticParams for dynamic routes and pre-renders all static routes; (5) JavaScript bundling with Webpack/Turbopack — code splitting, tree shaking, minification; (6) CSS optimization — PostCSS, Tailwind purging; (7) Image optimization setup; (8) Route manifest generation. Build output indicators: Static, ISR (with revalidate), λ Serverless (dynamic). Output modes: output: "standalone" — includes only necessary files for production (no node_modules), great for Docker; output: "export" — full static export (no server required). Analyzing bundle size: ANALYZE=true next build with @next/bundle-analyzer generates a visual treemap of bundle composition. Build caching: .next/cache/ preserves incremental compilation results between builds — unchanged code reuses cached compilation. Deployment: Vercel deploys automatically; self-host with node .next/standalone/server.js or Docker. next start starts the production server.

Common Mistake

Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your Next.js experience.