What is the purpose of the next.config.js file?

Question

Accepted Answer

next.config.js (or .ts / .mjs ) is the framework's configuration file. It lives at the project root and controls how Next.js builds, bundles, routes, and serves your app. A minimal config: // next.config.ts import type { NextConfig } from 'next'; const config: NextConfig = { reactStrictMode: true, }; export default config; Common things you configure here: images — allowed remote domains, formats, device sizes for next/image optimization. redirects() and rewrites() — server-side URL transformations. Redirects send a 308; rewrites transparently proxy to another path or URL. headers() — apply HTTP headers (security, caching, CORS) to specific path patterns. env — explicit environment variables to expose at build time. Most use cases are better handled via .env.local and NEXT_PUBLIC_ prefixes. experimental — opt into preview features like Partial Prerendering, dynamicIO, or new caching modes. output — 'standalone' for self-hosted deployments (produces a minimal Node bundle), or 'export' for fully static sites. webpack(config, options) — escape hatch for custom bundler tweaks (rare; usually a sign you should reach for a Next plugin instead). turbopack — Turbopack-specific overrides like custom loaders. i18n — locale routing for the Pages Router (App Router does this differently with middleware). typescript / eslint — toggle whether build fails on type or lint errors. Example with several common settings: const config: NextConfig = { images: { remotePatterns: [{ protocol: 'https', hostname: '**.amazonaws.com' }], }, async redirects() { return [{ source: '/old', destination: '/new', permanent: true }]; }, async headers() { return [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'DENY' }], }]; }, output: 'standalone', }; The file runs at build time only — it's not bundled into the client. That means you can use process.env , read files synchronously, or import Node-only modules safely. Changes require a server restart in dev. If you find yourself writing a lot of webpack config, that usually points to using the wrong tool — most needs are covered by a built-in Next.js feature or a community plugin. Mention 2-3 specific configurations you have used in production: redirects for URL migrations, image domains for CDN setup, or output: 'standalone' for Docker. Real-world examples are more impressive than listing all options.