What is next.config.js and what can you configure in it?

Question

Accepted Answer

The `next.config.js` file (or `next.config.ts` for TypeScript) is a **Node.js module** that sits at the root of your Next.js project and controls how the framework builds and runs your application. This file exports a configuration object that Next.js reads during **build time and runtime**, enabling you to customize everything from image optimization to build output directories, environment variables, and experimental features. Starting with Next.js 15, you can write this configuration file in either JavaScript or TypeScript for better type safety . // next.config.js or next.config.ts
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Core configuration options go here
  reactStrictMode: true,
  swcMinify: true,
  
  // Build output directory (default: '.next')
  distDir: 'build',
  
  // Enable static exports for static hosting
  output: 'standalone',
  
  // Custom build ID
  generateBuildId: async () => 'my-build-id',
};

module.exports = nextConfig; **Build and Compilation:** Configure how Next.js builds your application. Options include `swcMinify` (use Rust-based SWC minifier), `compiler` (customize SWC transforms), and `webpack` (customize webpack configuration). The default compiler is SWC, which is significantly faster than Babel . **Images and Assets:** The `images` configuration allows you to define image optimization behavior, including remote patterns (allowed image domains), image sizes for responsive images, and formats like WebP and AVIF. You can also disable image optimization if needed . **Redirects and Rewrites:** Configure server-side redirects, rewrites, and headers through functions like `redirects()`, `rewrites()`, and `headers()`. These run before the response is sent and can be used for SEO, A/B testing, or proxy patterns . **Environment Variables:** Control environment variable exposure with `env` (build-time env vars) and `publicRuntimeConfig` (client-side available variables). You can also use `.env` files which are automatically loaded . **Internationalization:** Configure i18n routing with `i18n` object, specifying locales, default locale, and domain-based locale detection. This enables automatic language detection and prefixed routes . // next.config.js
const nextConfig = {
  // React strict mode for development
  reactStrictMode: true,
  
  // Image optimization configuration
  images: {
    domains: ['images.unsplash.com', 'cdn.sanity.io'],
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        pathname: '/images/**',
      },
    ],
  },
  
  // Redirects function
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true, // 308 status code
      },
      {
        source: '/blog/:slug',
        destination: '/articles/:slug',
        permanent: true,
      },
    ];
  },
  
  // Custom headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
        ],
      },
    ];
  },
  
  // Internationalization
  i18n: {
    locales: ['en-US', 'es', 'fr'],
    defaultLocale: 'en-US',
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.es',
        defaultLocale: 'es',
      },
    ],
  },
}; **Experimental Features:** Next.js provides a `experimental` object to enable cutting-edge features like `instrumentationHook` (for monitoring), `typedRoutes` (experimental type-safe routes), or `serverActions` (enabled by default in Next.js 15). These features are subject to change . **Custom Webpack:** For advanced use cases, you can extend Next.js's internal webpack configuration using the `webpack` function. This allows adding custom loaders, plugins, or modifying the build pipeline, but should be used with caution . **Middleware Configuration:** Configure middleware behavior with `matcher` options to specify which paths should run middleware. This is typically done in the middleware.ts file itself, but related config can be placed here . **Output Configuration:** Control the build output format with `output: 'standalone'` for self-hosted deployments (creates a minimal standalone folder), or `output: 'export'` for static HTML exports . **Server Component Configuration:** Configure server component behavior, including the external packages list that should be bundled and runtime options . If you're using TypeScript, you can use `next.config.ts` instead of `.js` for better type checking and autocompletion. Next.js automatically detects this file and applies TypeScript validation. The configuration object is typed with `import('next').NextConfig`, providing IntelliSense

What is next.config.js and what can you configure in it?

next.config.js is the main configuration file for Next.js that allows you to customize build settings, enable features, and configure various aspects of your application's behavior

What is next.config.js and what can you configure in it?

next.config.js is the main configuration file for Next.js that allows you to customize build settings, enable features, and configure various aspects of your application's behavior

Scenario Questions

Follow-up Questions