构建Next.js独立项目后运行server.js出现404资源加载错误

常见排查及修复方法 #

• 核对构建产物路径配置
  确保server.js中指定的静态资源目录和实际构建生成的.next或out目录一致。比如通过next build && next export生成out目录时，要在server.js里正确指向该目录：

  const { createServer } = require('http');
  const { parse } = require('url');
  const next = require('next');
  
  const dev = false;
  const app = next({ dev, dir: __dirname, conf: { distDir: 'out' } });
  const handle = app.getRequestHandler();
  
  app.prepare().then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    }).listen(3000, (err) => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  });
  

• 验证构建命令与配置
  若生成独立服务器，需确保执行next build而非仅next dev。如果需要静态导出，要在next.config.js中添加对应配置：

  module.exports = {
    output: 'export',
  };
  

  执行next build后，生成的out目录才包含完整静态资源。

• 检查服务器启动路径
  运行server.js时，需保证当前工作目录为项目根目录，避免因路径问题找不到资源。也可直接用绝对路径启动：

  node /你的项目绝对路径/server.js
  

• 确认路由配置有效性
  检查页面文件是否放在对应目录（Next.js 12及以下用pages目录，13+ App Router用app目录），自定义路由需确保next.config.js中的rewrites或redirects配置无冲突。

错误截图 #

内容的提问来源于stack exchange，提问作者Duong Cong Chien