Next.js生产构建中Microsoft Signal R无法建立连接的问题

问题分析 #

生产构建（yarn build）后，SignalR初始化时协商请求URL被错误替换为当前组件路径（如http://localhost:3000/register/pre-fetch?negotiateVersion=1），而非预期的https://{{SignalrURL}}/negotiate?negotiateVersion=1，但开发环境（yarn dev）运行正常。核心原因是客户端代码中SignalR的Hub URL未使用绝对路径，或环境变量未正确注入生产构建流程。

解决步骤 #

1. 配置Next.js客户端可访问的环境变量 #

Next.js中，客户端代码能读取的环境变量必须以NEXT_PUBLIC_为前缀。在项目根目录创建/修改.env.production文件：

NEXT_PUBLIC_SIGNALR_URL=https://你的实际SignalR服务完整地址

2. 修改SignalR连接代码 #

更新signal.ts，用环境变量确保使用绝对路径：

import * as signalR from '@microsoft/signalr';

const signalrUrl = process.env.NEXT_PUBLIC_SIGNALR_URL;
if (!signalrUrl) {
  throw new Error('SignalR服务地址未配置');
}

const conn = new signalR.HubConnectionBuilder()
  .withUrl(signalrUrl, {
    accessTokenFactory: () => localStorage.getItem('token')
  })
  .withAutomaticReconnect()
  .configureLogging(signalR.LogLevel.Debug)
  .build()
  .start();

3. 验证生产构建时环境变量注入 #

• 本地测试生产构建：终端直接注入变量执行构建

NEXT_PUBLIC_SIGNALR_URL=https://你的实际地址 yarn build && yarn start

• CI/CD环境中，需在流水线配置中添加NEXT_PUBLIC_SIGNALR_URL环境变量

4. 排查路由/代理干扰 #

检查next.config.js中的rewrites或headers配置，确保未对SignalR协商请求路径错误重写。若有代理规则，需排除SignalR相关路径：

// next.config.js示例：排除SignalR路径
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://你的API地址/api/:path*',
      },
      // 确保SignalR协商请求不被代理
      {
        source: '/negotiate',
        destination: `${process.env.NEXT_PUBLIC_SIGNALR_URL}/negotiate`,
      },
    ];
  },
};

额外注意事项 #

• 确保SignalR服务端配置了正确的CORS规则，允许你的Next.js生产域名跨域访问
• 确认@microsoft/signalr客户端版本与服务端版本兼容（当前使用v7.0.0，需对应服务端版本）

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