如何在依赖的UI库更新后自动重启Next.js应用？

方案1：用nodemon监听ui/dist变化自动重启Next.js（最稳妥，兼容性高） #

这个方案不需要改Next.js配置，通过监听工具直接触发服务重启，适合所有版本的Next.js。

• 首先在Web项目下安装nodemon作为开发依赖：

  npm install nodemon --save-dev
  # 或pnpm/yarn对应的安装命令
  

• 修改Web项目的package.json启动脚本，注意替换监听路径为你实际的ui/dist相对路径：

  {
    "scripts": {
      // 原有next dev脚本可以保留
      "dev": "next dev",
      // 新增带UI库监听的启动脚本
      "dev:watch-ui": "nodemon --watch ../ui/dist --ext js,jsx,ts,tsx,css,mjs,cjs --exec 'next dev'"
    }
  }
  

  参数说明：--watch后面填ui/dist相对于Web项目根目录的路径，--ext后面填UI库构建产物的所有后缀，只要对应文件变化就会自动重启Next.js服务。

方案2：修改Next.js配置实现内置热更（无需额外工具，性能更好） #

如果你的Next.js版本在13.1+，支持transpilePackages配置，可以直接修改Next.js配置让它主动监听UI库的产物变化，大部分场景下不需要全量重启服务，走原生热更新即可生效。

• 打开Web项目的next.config.js，添加如下配置，替换your-ui-pkg-name为你UI组件库的package.json中定义的包名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 让Next.js转译UI库代码，同时开启对该包的变化监听
    transpilePackages: ['your-ui-pkg-name'],
    webpack: (config, { dev }) => {
      if (dev) {
        // 取消node_modules默认的快照缓存，支持监听软链依赖变化
        config.snapshot.managedPaths = []
        config.watchOptions = {
          ...config.watchOptions,
          followSymlinks: true,
          ignored: ['**/node_modules/!(your-ui-pkg-name)/**']
        }
      }
      return config
    }
  }
  module.exports = nextConfig
  

配套优化：单命令启动所有开发服务 #

不需要开两个终端分别跑UI库的watch和Web项目的dev，可以用concurrently把两个进程合并启动：

• 在monorepo根目录安装concurrently作为开发依赖
• 修改根目录的package.json脚本（适配pnpm workspace，npm/yarn workspace可以替换对应的包执行命令）：

  {
    "scripts": {
      "dev": "concurrently \"pnpm --filter ui dev\" \"pnpm --filter web dev:watch-ui\""
    }
  }
  

  配置完成后只要在根目录执行npm run dev，就会同时启动UI库的microbundle watch和Web项目的带监听开发服务，修改UI库代码后全程自动构建、自动更新Web应用，无需手动操作。

注意：请确保你的monorepo workspace配置正确，UI库是软链到Web项目的node_modules下，不要出现依赖硬拷贝的情况，否则会监听不到变化。

内容的提问来源于stack exchange，提问作者Guilherme Oderdenge