Next.js执行npm run dev时出现socket.io 404编译错误求助

常见原因 #

这个错误是因为开发环境中存在对/socket.io路径的请求，而Next.js默认未配置对应路由，每次请求都会触发_not-found页面编译，导致错误频繁弹出。常见触发源包括：

• 浏览器安装的实时协作、调试类扩展在后台发起socket.io请求
• 本地运行的代理、监控类服务误将请求发送到Next.js开发端口
• 项目引入socket.io但未正确配置路由或请求处理逻辑

修复步骤 #

1. 排查禁用可疑浏览器扩展 #

暂时禁用所有浏览器扩展，刷新页面观察错误是否消失。若消失，逐个重新启用扩展，定位触发请求的插件并禁用或调整其请求路径配置。

2. 检查本地运行的其他服务 #

查看本地是否有代理、调试工具等服务在运行，确认它们的请求目标是否指向Next.js开发端口（默认3000），若是，调整服务配置，避免向该端口发送/socket.io请求。

3. 为socket.io配置Next.js路由（项目需使用socket.io时） #

如果项目依赖socket.io，需在Next.js中添加对应的API路由处理请求：

• App Router：在app/api/socket/io/route.ts创建文件：

import { Server } from 'socket.io';

export const dynamic = 'force-dynamic';

export async function GET(request: Request) {
  const server = request.socket.server;
  
  if (!server.io) {
    const io = new Server(server, {
      path: '/api/socket/io',
      addTrailingSlash: false,
    });
    server.io = io;
    
    // 可在此添加socket.io事件逻辑
    io.on('connection', (socket) => {
      console.log('Socket连接:', socket.id);
      socket.on('disconnect', () => {
        console.log('Socket断开:', socket.id);
      });
    });
  }
  
  return new Response(null, { status: 200 });
}

• Pages Router：在pages/api/socket/io.ts创建文件，逻辑与上方一致。
  同时调整客户端socket.io连接路径为/api/socket/io，避免直接请求根路径的/socket.io。

4. 临时降低日志级别（仅临时方案） #

若暂时无法定位触发源，可修改Next.js配置减少错误提示：
在next.config.js中添加：

/** @type {import('next').NextConfig} */
const nextConfig = {
  logging: {
    fetches: {
      fullUrl: false,
    },
  },
};

module.exports = nextConfig;

或设置环境变量NEXT_PUBLIC_DEV_LOG_LEVEL=warn，仅显示警告及以上级别日志。

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