如何将Electron与Next.js 13.4集成来构建桌面应用

Electron是一款基于Chromium和Node.js的桌面应用开发框架，Next.js 13.4是React生态中成熟的全栈开发框架，将两者结合可以充分发挥各自的优势，快速构建出界面美观、功能完善的桌面应用。这种集成方式适合需要同时兼顾前端交互体验和桌面端原生能力的开发场景。

环境准备

首先需要确保本地已经安装了Node.js环境，建议版本在16.0及以上。然后创建项目目录，初始化项目并安装必要的依赖。

初始化项目

先创建主项目文件夹，然后分别初始化Next.js项目和Electron相关配置：

# 创建项目目录
mkdir electron-next-demo
cd electron-next-demo

# 初始化Next.js项目
npx create-next-app@13.4 next-app

# 安装Electron相关依赖
cd next-app
npm install electron electron-builder --save-dev

配置Next.js项目

Next.js 13.4默认使用app目录作为路由结构，我们需要调整配置让Electron可以正确加载渲染页面。

修改Next.js配置

打开next.config.js文件，添加以下配置，关闭默认的开发服务器自动打开浏览器功能，同时设置静态资源的基础路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 关闭开发服务器的自动打开浏览器
  devIndicators: {
    autoPrerender: false,
  },
  // 静态导出时的基础路径，适配Electron加载本地文件
  basePath: '',
  // 开启静态导出，方便Electron加载
  output: 'export',
  // 导出目录设置为dist，和Electron加载路径对应
  distDir: 'dist',
}

module.exports = nextConfig

调整package.json脚本

修改Next.js项目的package.json中的scripts字段，添加导出静态文件的命令：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  }
}

配置Electron主进程

在Next.js项目的根目录下创建electron.js文件，作为Electron的主进程入口文件。

主进程基础代码

主进程负责创建浏览器窗口，加载Next.js渲染的内容，同时处理原生相关的操作：

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

// 保持窗口对象的全局引用，避免被垃圾回收
let mainWindow

function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 开启Node.js集成，方便渲染进程调用Node能力
      nodeIntegration: true,
      // 关闭上下文隔离，简化主进程和渲染进程通信
      contextIsolation: false,
    },
  })

  // 判断是开发环境还是生产环境
  const isDev = process.env.NODE_ENV === 'development'
  if (isDev) {
    // 开发环境加载Next.js开发服务器地址
    mainWindow.loadURL('http://localhost:3000')
    // 打开开发者工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境加载静态导出的文件
    mainWindow.loadFile(path.join(__dirname, 'dist/index.html'))
  }

  // 窗口关闭时清空引用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

// Electron初始化完成后创建窗口
app.whenReady().then(() => {
  createWindow()
  // macOS系统下点击dock图标重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 所有窗口关闭时退出应用，除了macOS
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

修改项目启动脚本

在Next.js项目的package.json中添加Electron的启动脚本，同时安装concurrently和wait-on工具，方便开发时同时启动Next.js和Electron：

npm install concurrently wait-on --save-dev

然后修改package.json的scripts字段：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "electron:dev": "concurrently "npm run dev" "wait-on http://localhost:3000 && electron ."",
    "electron:build": "npm run build && electron-builder"
  }
}

主进程与渲染进程通信

Electron中主进程和渲染进程是隔离的，需要通过ipcMain和ipcRenderer实现通信。

主进程监听通信

在electron.js中添加ipcMain的监听逻辑：

const { ipcMain } = require('electron')

// 监听渲染进程发送的消息
ipcMain.on('renderer-message', (event, arg) => {
  console.log('收到渲染进程消息:', arg)
  // 向渲染进程回复消息
  event.reply('main-reply', '主进程已收到消息')
})

// 处理渲染进程的同步消息
ipcMain.handle('get-app-version', () => {
  return app.getVersion()
})

渲染进程发送消息

在Next.js的页面组件中，使用ipcRenderer和主进程通信：

'use client'

import { useEffect, useState } from 'react'
const { ipcRenderer } = require('electron')

export default function Home() {
  const [msg, setMsg] = useState('')
  const [version, setVersion] = useState('')

  useEffect(() => {
    // 监听主进程的回复
    ipcRenderer.on('main-reply', (event, arg) => {
      setMsg(arg)
    })

    // 获取应用版本
    ipcRenderer.invoke('get-app-version').then(v => {
      setVersion(v)
    })

    return () => {
      // 组件卸载时移除监听
      ipcRenderer.removeAllListeners('main-reply')
    }
  }, [])

  const sendMessage = () => {
    // 向主进程发送消息
    ipcRenderer.send('renderer-message', '这是来自渲染进程的消息')
  }

  return (
    <main style={{ padding: '2rem' }}>
      <h1>Electron + Next.js 13.4 集成示例</h1>
      <p>应用版本: {version}</p>
      <button onClick={sendMessage}>发送消息给主进程</button>
      <p>主进程回复: {msg}</p>
    </main>
  )
}

打包发布应用

配置electron-builder实现应用的打包，在package.json中添加打包相关配置：

{
  "build": {
    "appId": "com.example.electronnext",
    "productName": "ElectronNextDemo",
    "directories": {
      "output": "release"
    },
    "files": [
      "dist/**/*",
      "electron.js"
    ],
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

执行npm run electron:build命令，就可以在release目录下得到对应平台的安装包。

常见问题解决

• 开发时Electron窗口白屏：检查Next.js开发服务器是否正常启动，端口是否为3000，或者静态导出目录是否正确生成。
• 渲染进程无法使用require：确认nodeIntegration是否开启，contextIsolation是否关闭，或者升级到更高版本的Electron使用预加载脚本。
• 打包后页面无法加载：检查loadFile的路径是否正确，静态导出的文件是否完整包含在打包文件列表中。

ElectronNext.js_13.4桌面应用开发ReactNode.js修改时间：2026-07-14 03:00:44