使用 Electron 与 Next.js 13.4 构建桌面应用指南

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

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

// rootdir/package.json
{
  "name": "electron-next-app",
  "version": "1.0.0",
  "main": "main/index.js", // 指定 Electron 主进程入口文件
  "scripts": {
    "dev": "concurrently -n \"NEXT,ELECTRON\" -c \"yellow,blue\" --kill-others \"next dev\" \"electron .\"",
    "build": "next build && next export && electron-builder",
    "start": "electron ."
  },
  "devDependencies": {
    "concurrently": "^8.2.2",
    "electron-builder": "^24.9.1"
  },
  "dependencies": {
    "electron": "^28.0.0",
    "electron-serve": "^1.2.0",
    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

// rootdir/app/next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ... 其他 Next.js 配置
  output: "export", // 将 Next.js 应用导出为静态 HTML、CSS 和 JS 文件
  images: {
    unoptimized: true // 在静态导出模式下，禁用 Next.js Image 组件的图像优化功能
  }
  // ... 其他 Next.js 配置
};

module.exports = nextConfig;

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

// 根据环境选择加载方式
const loadURL = serve({ directory: path.join(__dirname, '../out') }); // 'out' 是 Next.js 默认的导出目录

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();
  }
});

// 示例：主进程处理渲染进程的请求
ipcMain.handle('get-data-from-main', async (event, arg) => {
  console.log('Received request from renderer:', arg);
  // 这里可以执行文件读写、数据库操作、网络请求等
  return `Data from main process: ${arg} - ${new Date().toLocaleString()}`;
});

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

contextBridge.exposeInMainWorld('electronAPI', {
  getData: (arg) => ipcRenderer.invoke('get-data-from-main', arg),
  // 可以在这里暴露更多主进程功能
});

// rootdir/app/pages/_app.js (或 app/layout.js for App Router)
import React, { createContext, useContext } from 'react';

// 创建一个 Context 来提供 Electron API
const ElectronApiContext = createContext(null);

export function useElectronApi() {
  return useContext(ElectronApiContext);
}

export default function MyApp({ Component, pageProps }) {
  // 确保在客户端渲染时才访问 window.electronAPI
  const electronApi = typeof window !== 'undefined' ? window.electronAPI : null;

  return (
    <ElectronApiContext.Provider value={electronApi}>
      <Component {...pageProps} />
    </ElectronApiContext.Provider>
  );
}

// rootdir/app/pages/index.js (示例页面)
import React, { useState, useEffect } from 'react';
import { useElectronApi } from '../pages/_app'; // 假设 _app.js 在 pages 目录下

export default function HomePage() {
  const electronApi = useElectronApi();
  const [data, setData] = useState('Loading...');

  useEffect(() => {
    if (electronApi) {
      electronApi.getData('Hello from Next.js').then((result) => {
        setData(result);
      }).catch(error => {
        console.error('Error fetching data from main process:', error);
        setData('Error fetching data.');
      });
    } else {
      setData('Electron API not available (running outside Electron)');
    }
  }, [electronApi]);

  return (
    <div>
      <h1>Electron + Next.js 示例</h1>
      <p>{data}</p>
      <button onClick={() => {
        if (electronApi) {
          electronApi.getData('Button Clicked!').then(result => setData(result));
        }
      }}>
        Refresh Data
      </button>
    </div>
  );
}

npm run build