Express服务端场景下Next.js如何实现文件变更自动重建与重载

核心思路 #

针对“不用Next自带路由、所有路由由Express接管”的场景，解决单靠nodemon只重启Express、不触发Next自动构建的问题，核心是拆分监听边界、串联两个进程的动作流程：

• 让Next独立运行在dev模式下，持续监听前端代码变动自动完成增量构建，全程无需手动敲构建命令
• 用nodemon精准监听Express的服务端代码变动，触发服务重启
• 通过轻量的钩子机制串联流程，确保Next构建完成后再触发Express重启，不会出现加载旧构建产物的问题

具体配置步骤 #

1. 依赖安装 #

需要安装两个开发依赖，分别对应进程并行、重启触发的能力：
npm install --save-dev concurrently nodemon

2. 调整Next初始化逻辑，关闭自带路由接管 #

在Express入口文件中初始化Next实例时，保持dev模式开启，但完全不注册Next自带的路由兜底逻辑，所有请求处理全部由Express自定义实现，示例代码：

const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
// 固定开启dev模式，让Next自动监听文件变动构建
const nextApp = next({ dev })
const port = 3000

nextApp.prepare().then(() => {
  const server = express()

  // 完全自定义Express路由，不调用Next的默认请求处理函数
  server.get('/user/:id', (req, res) => {
    // 需要渲染Next页面时，主动调用Next的渲染方法传参
    return nextApp.render(req, res, '/user', { id: req.params.id })
  })

  // ...其他全量自定义路由逻辑
  // 注意：不要写server.all('*', nextApp.getRequestHandler())，否则会启用Next自带路由

  server.listen(port, () => {
    console.log(`Express服务运行在 http://localhost:${port}`)
  })
})

3. 配置启动脚本与监听规则 #

在package.json中配置开发启动脚本，通过concurrently并行拉起Next的监听构建进程、nodemon的Express重启进程，同时给nodemon加范围限制，避免无限重启循环：

{
  "scripts": {
    "dev": "concurrently \"next dev\" \"nodemon --watch server --ext js,ts --ignore .next/ --ignore public/ server/index.js\""
  }
}

• --watch server：只监听Express服务端目录下的文件变动，不扫描其他无关目录
• --ext js,ts：同时识别js、ts格式的服务端代码变动
• --ignore .next/ --ignore public/：把Next构建产物目录、静态资源目录排除出监听范围，防止Next构建产生的新文件误触发Express重启，避免无限循环

4. 实现“Next构建完成后触发Express重启”的流程串联 #

如果需要满足“每一次前端代码改动，Next完成重建后自动重启Express”的需求，可以在next.config.js中加一个轻量的Webpack钩子，当Next完成一次构建后，主动更新Express入口文件的修改时间，让nodemon捕捉到变化触发重启：

// next.config.js
const fs = require('fs')
module.exports = {
  webpack: (config, { dev }) => {
    // 仅在开发环境启用钩子
    if (dev) {
      config.plugins.push({
        apply: (compiler) => {
          // 等Next完成所有文件构建输出后执行
          compiler.hooks.afterEmit.tap('ExpressRestartTrigger', () => {
            // 更新Express入口文件的修改时间，触发nodemon重启
            fs.utimesSync('./server/index.js', new Date())
          })
        }
      })
    }
    return config
  }
}

这个配置的执行逻辑是：前端代码变动 -> Next自动监听触发重建 -> 所有构建文件输出完成 -> 主动更新Express入口文件的时间戳 -> nodemon捕捉到文件变动 -> 重启Express服务，完全匹配预期的流程要求。

常见踩坑提醒 #

• 绝对不要把.next目录加入nodemon的监听范围，否则会出现无限重启死循环：Next构建生成新文件 -> nodemon监听到变化重启Express -> Next重新触发构建 -> 循环往复
• 开发环境不要关闭Next的dev模式，否则Next不会自动监听文件变动做增量构建，需要手动执行next build才能看到改动效果
• 如果服务端代码用了TypeScript，记得在nodemon的--ext参数里加上ts，否则改动ts格式的服务端文件不会触发重启

内容的提问来源于stack exchange，提问作者Santiago Mendoza Ramirez