Unable to configure webpack dev server.

[dwjohnston]

Link to the code that reproduces this issue

https://github.com/dwjohnston/nextjs-webpack-dev-server

To Reproduce

1. Start the application (npm run dev), open browser window to running application
2. Open the dev tools, network tab, inspect the headers of the page.js file

The reproduction attempts to configure the webpack dev server by adding:

  webpack: (config) => {
    if (!config.devServer){
      config.devServer = {};
    }

    config.devServer.headers = () => {
      return [{
        key: "hello", 
        value: "world"
      }]
    }
    return config;   
  }

To next.config.js

The NextJS documentation does not indicate that webpack dev server can not be configured this way, nor does it indicate an alternative mechanism for configuring.

Current vs. Expected behavior

Expected behaviour:

The page.js resource should have the header `hello: world'

Actual behaviour:

The resouce does not have the expected header.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Wed Jul 31 20:49:39 PDT 2024; root:xnu-10063.141.1.700.5~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 22.10.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 8.9.0
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: 15.0.1
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Documentation, Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The purpose of this, is investigating a performance optimisation - basically implementing something similar to Vite's prebundling.

The issue I have is our development bundle is very large (15MB or so) and this takes about 1-2s to download. I want to use Webpack's SplitChunksPlugin to split out large vendor bundles, and also apply an immutable cache header to them.

The webpack configuration for splitting the chunks is being respected, but I can't apply the immutable cache header.