Next.js自定义服务器修改不生效，需重启应用问题求助

后端使用Express.js，前端使用Next.js(TypeScript)，已按照Next.js官方文档配置自定义服务器连接。但执行npm run dev启动后，修改后端代码无法实时生效，必须重新执行npm run dev才会生效。

Express端app.js代码 #

const express = require('express')
//const proxy = require('express-http-proxy')
const parser = require('body-parser')
const session = require('express-session')
const dotenv = require('dotenv').config()
const {pool} = require('./routes/routes')

const pgSessionStore = require('connect-pg-simple')(session);


function nextAppWrapper(nextApp){

const app = express()
const port = 3000

const {router}  = require('./routes/routes')
const cors = require('cors')

corsConfig = {
  methods:'*',
  credentials:true
}


app.set('trust proxy', 1) // trust first proxy

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

app.use(cors(corsConfig))

app.use(session(
  {
  store: new pgSessionStore({
    pool:pool,
    tableName:'session',
    createTableIfMissing:true
    
  }),
  secret: process.env.SESSION_SECRET,
  resave: true,
  cookie: { maxAge: 365 * 24 * 60 * 60 * 1000,httpOnly: true , domain:'127.0.0.1:3000'},
  saveUninitialized: true,
}))

app.use(parser.urlencoded({extended:false}))
app.use(parser.json())
app.use('/api',router)
//app.use(proxy('http://127.0.0.1:3000'))

const handle = nextApp.getRequestHandler()

app.all('*', (req, res) => {
  return handle(req, res);
});

}

module.exports = nextAppWrapper

Next.js端server.ts代码 #

const nextAppWrapper = require('../backend/app')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({dev})
nextApp.prepare().then(()=>{
    nextAppWrapper(nextApp)
})

Express端package.json依赖 #

"dependencies": {
    "@aws-sdk/client-dynamodb": "^3.651.1",
    "@aws-sdk/client-s3": "^3.651.1",
    "@aws-sdk/client-ses": "^3.651.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.3",
    "connect-pg-simple": "^10.0.0",
    "dotenv": "^16.4.5",
    "express": "^4.21.0",
    "express-http-proxy": "^2.1.1",
    "express-session": "^1.18.0",
    "jest": "^29.7.0",
    "nodemailer": "^6.9.15",
    "nodemon": "^3.1.4",
    "pg": "^8.12.0",
    "pg-pool": "^3.6.2",
    "rewire": "^7.0.0",
    "sinon": "^19.0.2",
    "slugify": "^1.6.6",
    "socket.io": "^4.7.5",
    "supertest": "^7.0.0",
    "uuid": "^10.0.0"
}

Next.js端package.json依赖与脚本 #

依赖

"dependencies": {
    "@nextui-org/react": "^2.4.8",
    "@nextui-org/tooltip": "^2.0.41",
    "dompurify": "^3.1.7",
    "express-http-proxy": "^2.1.1",
    "hugeicons-react": "^0.3.0",
    "markdown-it": "^14.1.0",
    "markdown-it-jsx": "^1.1.0",
    "markdown-to-jsx": "^7.5.0",
    "moment": "^2.30.1",
    "next": "14.2.10",
    "react": "^18",
    "react-dom": "^18",
    "socket.io": "^4.7.5"
  },
  "devDependencies": {
    "@types/dompurify": "^3.0.5",
    "@types/markdown-it": "^14.1.2",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.10",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }

脚本

"scripts": {
    "dev": "node server.ts",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

1. 安装nodemon到Next.js项目 #

在Next.js项目根目录执行：

npm install --save-dev nodemon

2. 修改Next.js的dev脚本 #

更新package.json中的dev脚本，用nodemon启动服务器：

"scripts": {
    "dev": "nodemon server.ts",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

3. 创建nodemon配置文件 #

在Next.js项目根目录新建nodemon.json，指定监听后端文件、忽略前端无关文件，避免不必要的重启：

{
  "watch": ["../backend/**/*.js", "server.ts"],
  "ignore": ["../backend/node_modules", ".next", "node_modules", "pages/**/*", "public/**/*"],
  "ext": "js,ts,json",
  "exec": "node server.ts"
}

原理说明 #

• nodemon会监听配置中指定的文件变化，当后端代码（../backend下的.js文件）或自定义服务器文件（server.ts）修改时，自动重启Node.js进程，重新加载最新的后端代码。
• 配置ignore项可以避免前端文件（如pages、public目录）变化触发后端服务重启，保留Next.js自身的前端热重载能力。

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