Next.js 15.1.4导出静态路径问题：适配Electron桌面应用

核心问题分析 #

Next.js 15的assetPrefix不支持以./开头的相对路径，直接设置会触发报错；静态导出时默认生成绝对路径的资源引用，导致Electron通过file:协议加载时无法正确定位资源。

解决方案步骤 #

1. 配置Next.js静态导出与路径转换 #

修改next.config.mjs，开启静态导出并通过webpack loader替换绝对路径为相对路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 开启静态导出模式，自动生成out目录
  output: 'export',
  // 强制每个页面生成带index.html的目录结构，确保相对路径生效
  trailingSlash: true,
  // 配置webpack规则，替换HTML中的绝对资源路径
  webpack: (config) => {
    config.module.rules.push({
      test: /\.html$/,
      use: [
        {
          loader: 'html-loader',
          options: {
            minimize: false,
            preprocessor: (content) => {
              // 将所有/_next/开头的绝对路径替换为相对路径./_next/
              return content.replace(/_next\//g, './_next/');
            },
          },
        },
      ],
    });
    return config;
  },
};

export default nextConfig;

2. 安装必要依赖 #

执行命令安装html-loader，用于处理HTML文件的路径替换：

npm install html-loader --save-dev

3. 确认构建脚本配置 #

确保package.json中的build脚本正确触发Next.js静态导出：

"scripts": {
  "dev": "concurrently \"next dev\" \"electron .\"",
  "build": "next build && electron-builder",
  "start": "electron .",
  "lint": "next lint"
}

注：Next.js 13+ 开启output: 'export'后，next build会自动生成out目录，无需额外执行next export。

4. 验证Electron加载路径 #

保持main.js中的加载逻辑不变，确保路径指向out目录下的index.html：

// Load the static files from the `out` directory
mainWindow.loadURL(
    url.format({
        pathname: path.join(__dirname, 'out', 'index.html'),
        protocol: 'file:',
        slashes: true,
    })
);

额外注意事项 #

• 确保Next.js应用未使用静态导出不支持的功能（如API路由、动态渲染等），否则会导致构建失败。
• 若存在自定义静态资源（如assets目录下的文件），需确保HTML中引用时使用相对路径，或在webpack配置中添加对应的替换规则。

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