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

rootdir/
├── app/         # 存放 Next.js 应用代码
│   ├── pages/   # 或 app/ (如果解决了兼容性问题)
│   ├── public/
│   ├── ...
│   └── next.config.js
└── main/        # 存放 Electron 主进程代码
    ├── index.js # Electron 主入口文件
    ├── preload.js # 预加载脚本 (可选)
    └── package.json

// rootdir/package.json
{
  "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 --port 3000 app\" \"electron .\"",
    "build": "next build app && electron-builder",
    "start": "electron ."
  },
  "devDependencies": {
    "concurrently": "^8.2.1",
    "electron": "^28.0.0",
    "electron-builder": "^24.9.1",
    "electron-serve": "^1.2.0"
  },
  "dependencies": {
    "next": "^13.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

npm install concurrently electron electron-builder electron-serve next react react-dom

// app/next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 将 Next.js 应用导出为静态 HTML、CSS 和 JavaScript 文件
  output: "export",
  // 禁用 Next.js 的图片优化，因为在 Electron 静态环境中可能无法正常工作
  images: {
    unoptimized: true
  },
  // 如果使用 Pages Router，可能需要配置 basePath
  // basePath: '/path/to/your/app', // 根据实际情况配置
};

module.exports = nextConfig;

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

// 初始化 electron-serve 来加载 Next.js 静态文件
const loadURL = serve({ directory: path.join(__dirname, '../app/out') });

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 禁用 Node.js 集成，提高安全性
      contextIsolation: true, // 启用上下文隔离，提高安全性
      preload: path.join(__dirname, 'preload.js') // 预加载脚本
    }
  });

  // 在开发模式下加载 Next.js 开发服务器
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000'); // Next.js 开发服务器地址
    mainWindow.webContents.openDevTools(); // 打开开发者工具
  } else {
    // 在生产模式下加载 Next.js 构建的静态文件
    loadURL(mainWindow);
  }

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

app.on('ready', createWindow);

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

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

// 这里可以添加您的后端服务逻辑，例如：
// const { ipcMain } = require('electron');
// ipcMain.handle('get-data', async (event, args) => {
//   // 执行数据库查询或其他后端操作
//   return { message: 'Data from main process!' };
// });

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

contextBridge.exposeInMainWorld('electronAPI', {
  // 暴露一个函数，用于从渲染进程调用主进程
  getData: () => ipcRenderer.invoke('get-data'),
  // 也可以暴露一个监听事件的函数
  onUpdate: (callback) => ipcRenderer.on('update-event', (event, ...args) => callback(...args))
});

// app/pages/index.js (或 app/layout.js / app/page.js 如果 App Router 兼容)
import React, { useEffect, useState } from 'react';

function HomePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 检查 electronAPI 是否存在（通过预加载脚本暴露）
    if (window.electronAPI) {
      window.electronAPI.getData().then(result => {
        setData(result.message);
      }).catch(error => {
        console.error("Failed to get data from main process:", error);
      });
    }
  }, []);

  return (
    <div>
      <h1>Hello from Next.js!</h1>
      {data && <p>Data from Electron: {data}</p>}
      <button onClick={() => {
        if (window.electronAPI) {
          // 示例：触发主进程的某个操作
          // window.electronAPI.someAction();
        }
      }}>
        Trigger Electron Action
      </button>
    </div>
  );
}

export default HomePage;

npm run build