Make the development server directory watch list extendable

[twoelevenjay]

Goals

1. Right now there are app architecture semantics that automatically get watched like component. Custom directory names are not supported.
2. If there was a simple straight forward way to add a directory name to the watch list with an entry to the next config file, then Next will be much more flexible.
3. Right now the only clean way to get an unsupported directory to initiate hot reloading is when the file in the directory is imported to the app with webpack import. But Next dynamic import breaks this. It would be addressable with a simple option to extend the watch list.

Non-Goals

1. This does not aim to alter the existing watch list, only to extend it.
2. This does not aim to alter how NextJS handles HMR.

Background

While exhausting the possible alternatives, nothing was suitable. My only options were to remove Next HMR and replace it with one patched together. Next is so robust it is the best option for my goal. But I want to use Next for a component library that will separate the traditional Next files from a data file and Theme files. This way individual project needs will edit the data and theme files, while any changes to the component library will be edited separately . So I need the /themes/ directory to be added to the HMR watch list. https://github.com/twoelevenjay/component-js

Proposal

module.exports = {
  // Other Next.js configuration options...

  // New proposed configuration option for extending HMR watch list:
  hmrWatchList: {
    // Include additional directories for HMR to watch:
    include: [
      './themes',  // Watching a custom themes directory
      './some-other-directory'  // Watching another custom directory
      // ... more directories as needed
    ],

    // Exclude certain files or directories from HMR, if needed:
    exclude: [
      './some-directory-to-exclude',  // Excluding a specific directory
      './some-file-to-exclude.js'  // Excluding a specific file
      // ... more exclusions as needed
    ],

    // Optionally, provide custom file watching options (e.g., debounce delay):
    options: {
      debounceDelay: 200  // Debounce delay in milliseconds
    }
  }
}

[ShaMan123]

+1 this is also important for local development process using npm link devPackage in case devPackage is in watch mode as well and rebuilding itself - the dev works on the next app, fixes something on devPackage and wants HMR to work.

[MikeCodeur]

+1 I'm very interested in this proposal on GitHub to extend the HMR watch list