如何用Next.js 13.4与Electron构建桌面应用？求解决方案

一、现有适配模板 #

• 社区维护的electron-next适配分支：针对Next.js 13+的App Router做了适配，已经处理了Electron窗口加载、开发热更新等核心逻辑，直接克隆即可使用。
• Electron Forge自定义Webpack模板：基于Electron Forge的官方Webpack模板，替换成Next.js的配置，很多开发者已经验证过该方案适配Next.js 13.4。

二、手动配置步骤 #

如果找不到合适模板，手动配置也并不复杂：

1. 初始化Next.js 13.4项目：

   npx create-next-app@13.4 my-electron-app --experimental-app
   

2. 安装Electron及配套工具：

   npm install electron electron-builder concurrently wait-on --save-dev
   

3. 创建Electron主进程文件（main.js）：

   const { app, BrowserWindow } = require('electron');
   const path = require('path');
   
   function createWindow() {
     const mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: false,
         contextIsolation: true
       }
     });
   
     // 开发环境加载Next.js dev服务器，生产环境加载静态文件
     if (process.env.NODE_ENV === 'development') {
       mainWindow.loadURL('http://localhost:3000');
       mainWindow.webContents.openDevTools();
     } else {
       mainWindow.loadFile(path.join(__dirname, '../out/index.html'));
     }
   }
   
   app.whenReady().then(() => {
     createWindow();
     app.on('activate', () => {
       if (BrowserWindow.getAllWindows().length === 0) createWindow();
     });
   });
   
   app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') app.quit();
   });
   

4. 修改package.json：
   • 添加main字段："main": "main.js"
   • 更新scripts：

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

5. 修改next.config.js，开启静态导出：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
   }
   
   module.exports = nextConfig;
   

三、替代框架/工具 #

• Tauri：替代Electron的轻量框架，和Next.js适配性极强，无需复杂模板即可快速搭建，打包后的应用体积远小于Electron。
• Nextron：专门为Next.js + Electron打造的集成框架，最新版本已支持Next.js 13.4的App Router，用以下命令直接生成适配项目：

  npx nextron init my-app --template app-router
  

内容的提问来源于stack exchange，提问作者NoobMaster69