Next.js+自定义服务器+TypeScript启动报错求助

问题复现步骤 #

• 执行npx create-next-app --typescript example-app创建Next.js+TypeScript项目
• 创建server.ts：将CommonJS代码转为ES模块（替换require为import），并添加//@ts-nocheck
• 修改tsconfig.json：设置"target": "ESNext"
• 修改package.json：将dev脚本改为"dev": "npx tsx server.ts"

执行npm run dev时触发如下错误：

TypeError: Unexpected response from worker: undefined
at ChildProcessWorker._onMessage (.......\node_modules\next\dist\compiled\jest-worker\index.js:1:12492)

相关配置文件 #

package.json #

{
  "name": "example-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npx tsx server.ts",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

server.ts #

//@ts-nocheck
import { createServer } from "http";
import next from "next";

const app = next({dev: process.env.NODE_ENV !== 'production'})

app.prepare().then(() => {
const server = createServer((req, res) => {
// Handle API routes
if (req.url.startsWith('/api')) {
    // Your API handling logic here
} else {
    // Handle Next.js routes
    return app.getRequestHandler()(req, res)
}
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})

解决方案 #

1. 调整TypeScript模块配置 #

将tsconfig.json中的module字段从"esnext"改为"CommonJS"，解决ES模块与Next.js内部运行时的兼容性冲突：

"module": "CommonJS"

2. 显式指定开发环境变量 #

修改package.json的dev脚本，明确设置NODE_ENV为development，避免Next.js环境判断异常：

• Linux/macOS：

  "dev": "NODE_ENV=development npx tsx server.ts"
  

• Windows：

  "dev": "set NODE_ENV=development && npx tsx server.ts"
  

3. 优化自定义服务器代码 #

更新server.ts，使用Next.js官方推荐的请求处理方式，确保正确解析路由：

//@ts-nocheck
import { createServer } from "http";
import next from "next";
import { parse } from "url";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url!, true);
    const { pathname, query } = parsedUrl;

    if (pathname?.startsWith("/api")) {
      // 自定义API逻辑示例
      res.writeHead(200, { "Content-Type": "application/json" });
      res.end(JSON.stringify({ message: "API response" }));
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

4. 降级Next.js版本（备选） #

若上述方案无效，可降级到Next.js 13.2.x版本，该版本对自定义服务器的兼容性更稳定：

npm install next@13.2.4

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