Electron与Next.js 13.4集成：构建桌面应用的实用指南

rootdir/
├── app/   # 存放Next.js前端应用代码
└── main/  # 存放Electron主进程代码

{
  "name": "electron-nextjs-app",
  "version": "1.0.0",
  "description": "Desktop app with Electron and Next.js",
  "main": "main/index.js", // Electron主进程入口文件
  "scripts": {
    "dev": "concurrently -n \"NEXT,ELECTRON\" -c \"yellow,blue\" --kill-others \"next dev app\" \"electron .\"",
    "build": "next build app && electron-builder"
  },
  "dependencies": {
    "electron-serve": "^1.2.0",
    "next": "^13.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "concurrently": "^8.2.0",
    "electron": "^26.0.0",
    "electron-builder": "^24.0.0"
  }
}

// app/next.config.js
const nextConfig = {
  // ...其他Next.js配置
  output: "export", // 将Next.js应用导出为静态HTML、CSS和JS文件
  images: {
    unoptimized: true // 在静态导出模式下，禁用Next.js的图片优化，避免问题
  }
  // ...
};

module.exports = nextConfig;

// main/index.js
const { app, BrowserWindow } = require('electron');
const serve = require('electron-serve');
const path = require('path');

const loadURL = serve({ directory: 'app/out' }); // Next.js默认输出目录是`out`

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true, // 允许在渲染进程中使用Node.js API (注意安全性)
      contextIsolation: false, // 禁用上下文隔离 (为了方便Context API通信，生产环境建议启用并使用预加载脚本)
      preload: path.join(__dirname, 'preload.js') // 预加载脚本，用于安全的IPC通信
    }
  });

  // 在开发模式下，可以直接加载Next.js开发服务器
  // if (process.env.NODE_ENV === 'development') {
  //   mainWindow.loadURL('http://localhost:3000');
  // } else {
  //   loadURL(mainWindow); // 生产模式下加载静态文件
  // }

  // 统一使用 electron-serve 加载，兼容开发和生产
  // 注意：在开发模式下，Next.js dev server 运行在 3000 端口，
  // electron-serve 默认会从 'app/out' 目录加载。
  // 实际开发中，可能需要根据 NODE_ENV 区分加载方式。
  // 这里为了简化，假设构建后运行。
  loadURL(mainWindow); 

  // 打开开发者工具
  // mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

// 示例：主进程与渲染进程通信 (通过预加载脚本实现更安全)
// app.on('ready', () => {
//   // 在这里设置IPC监听器
//   ipcMain.on('some-event-from-renderer', (event, arg) => {
//     console.log(arg); // 打印渲染进程发送的数据
//     event.reply('some-reply-to-renderer', 'Hello from main process!');
//   });
// });

// main/preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message-from-renderer', message),
  onReply: (callback) => ipcRenderer.on('reply-from-main', (event, arg) => callback(arg))
});