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

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.