如何使用Electron与Next.js 13.4构建桌面应用

Electron是跨平台桌面应用开发框架，能让开发者用Web技术构建桌面程序，Next.js 13.4是React生态中成熟的全栈框架，二者结合可以高效开发桌面应用。下面我们一步步完成整个开发流程。

环境准备

首先需要确保本地已经安装Node.js，建议版本在16.0以上，然后安装必要的全局依赖：

# 安装Electron全局工具
npm install -g electron
# 创建Next.js项目
npx create-next-app@13.4 my-electron-app

项目基础配置

调整Next.js配置

为了让Next.js适配Electron的运行环境，需要修改next.config.js文件，关闭静态资源优化，避免路径问题：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 关闭静态优化，适配Electron本地文件加载
  target: 'server',
  // 关闭图片优化，避免Electron中路径异常
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

添加Electron主进程文件

在项目根目录创建electron-main.js作为Electron的主进程文件，负责创建应用窗口和加载Next.js页面：

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 开启Node.js集成，方便调用系统能力
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  // 开发环境加载本地Next.js服务，生产环境加载打包后的静态文件
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:3000')
    // 打开开发者工具
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(__dirname, 'out/index.html'))
  }
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

启动脚本配置

修改package.json添加启动和打包相关的脚本，方便开发调试和后续发布：

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev:next": "next dev",
    "dev:electron": "electron .",
    "dev": "concurrently "npm run dev:next" "npm run dev:electron"",
    "build:next": "next build && next export -o out",
    "build:electron": "electron-builder",
    "build": "npm run build:next && npm run build:electron"
  },
  "dependencies": {
    "next": "13.4.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "concurrently": "^8.2.0",
    "electron": "^25.0.0",
    "electron-builder": "^24.6.0"
  }
}

这里需要安装concurrently依赖，用来同时启动Next.js开发服务和Electron主进程，安装命令如下：

npm install concurrently --save-dev

开发调试

执行npm run dev就可以启动开发环境，此时会同时运行Next.js的3000端口服务和Electron窗口，修改Next.js的代码后页面会自动热更新，方便调试界面和逻辑。

打包发布

首先需要执行npm run build:next打包Next.js项目，生成静态文件到out目录，然后配置electron-builder的打包参数，在项目根目录创建electron-builder.yml：

appId: com.example.myapp
productName: 我的桌面应用
directories:
  output: dist
files:
  - "out/**/*"
  - "electron-main.js"
win:
  target: nsis
mac:
  target: dmg
linux:
  target: AppImage

执行npm run build就可以生成对应平台的安装包，安装包会输出到dist目录下。

常见问题说明

• 如果Electron窗口白屏，检查Next.js的静态文件路径是否正确，生产环境需要确认out目录已经生成。
• 调用Node.js系统API时，需要确保nodeIntegration已经开启，或者配置preload脚本安全调用。
• Next.js 13.4的App Router模式下，静态导出需要确保所有页面都是静态生成的，避免使用服务端独有API。

ElectronNext.js_13.4桌面应用开发ReactNode.js修改时间：2026-07-11 23:33:27