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

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

npm install --save-dev concurrently
# 或 yarn add --dev concurrently

{
  "scripts": {
    "dev": "concurrently -n \"NEXT,ELECTRON\" -c \"yellow,blue\" --kill-others \"next dev\" \"electron .\"",
    "build": "next build && electron-builder"
  }
}

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

module.exports = nextConfig;

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

contextBridge.exposeInMainWorld('electronAPI', {
  // 暴露一个函数，用于从渲染进程调用主进程的某个服务
  // 例如，获取数据
  getSomeData: () => ipcRenderer.invoke('get-some-data'),
  // 暴露一个函数，用于向主进程发送数据
  saveSomeData: (data) => ipcRenderer.send('save-some-data', data),
  // 监听主进程发来的事件
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (event, value) => callback(value))
});

// main/main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const serve = require('electron-serve'); // 用于服务 Next.js 静态文件

const loadURL = serve({ directory: path.join(__dirname, '../app/out') }); // Next.js 静态文件输出目录

let mainWindow;

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

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

  // IPC 主进程监听器
  ipcMain.handle('get-some-data', async (event) => {
    // 在这里执行后端逻辑，例如从数据库获取数据
    return { message: 'Data from main process!' };
  });

  ipcMain.on('save-some-data', (event, data) => {
    // 在这里执行后端逻辑，例如保存数据到文件或数据库
    console.log('Received data from renderer:', data);
    // 可以向渲染进程发送响应
    // event.sender.send('save-data-success', true);
  });

  // 示例：主进程定时向渲染进程发送更新
  let counter = 0;
  setInterval(() => {
    counter++;
    mainWindow.webContents.send('update-counter', counter);
  }, 1000);
}

app.whenReady().then(() => {
  createWindow();

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

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

// app/pages/index.js (或 app/app/page.js)
import React, { useEffect, useState } from 'react';

function HomePage() {
  const [dataFromMain, setDataFromMain] = useState('');
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    // 检查 electronAPI 是否存在 (通过 preload 脚本暴露)
    if (window.electronAPI) {
      // 从主进程获取数据
      window.electronAPI.getSomeData().then(data => {
        setDataFromMain(data.message);
      });

      // 向主进程发送数据
      window.electronAPI.saveSomeData({ name: 'Next.js App', version: '1.0' });

      // 监听主进程发来的更新事件
      window.electronAPI.onUpdateCounter((value) => {
        setCounter(value);
      });
    }
  }, []);

  return (
    <div>
      <h1>Electron + Next.js 桌面应用</h1>
      <p>从主进程接收到的数据: {dataFromMain}</p>
      <p>主进程计数器: {counter}</p>
      {/* 可以在这里添加更多 UI 元素 */}
    </div>
  );
}

export default HomePage;

npm install electron-serve
# 或 yarn add electron-serve

// main/main.js
const serve = require('electron-serve');
const loadURL = serve({ directory: path.join(__dirname, '../app/out') });
// ...
// 在 createWindow 函数中
if (process.env.NODE_ENV === 'production') { // 生产环境下
  loadURL(mainWindow);
}

npm install --save-dev electron-builder
# 或 yarn add --dev electron-builder

{
  "scripts": {
    "build": "next build && electron-builder"
  }
}