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.

[samcx]

@dwjohnston Is it possible to explain the purpose for exploring this over using Turbopack in development, which is stable on v15?

[dwjohnston]

It's something I'll investigate, but for now the stack is on webpack so trying to change one thing at a time.

[Falven]

@samcx For starters, debugging in a monorepo doesn't work with Turbopack :|

[transfer1992]

I got Turbopack errors coming from our internal component library's intantiated class singleton. The error doesn't happen on webpack. I had to disable Turbopack when migrating to 15 and still stick to webpack.