下面给你一个从零开始的Next.js 15.1.3 + TypeScript + Tailwind CSS + Electron 打包到桌面应用的完整示例流程。你可以在此基础上进行修改或扩展。

---

一、项目初始化

1. 创建 Next.js 项目

在终端执行：

npx create-next-app@15.1.3 --typescript --tailwind --eslint my-electron-app

此时会询问一些选项，选 Yes 即可。该命令会自动为你创建 Next.js + TypeScript + Tailwind 的项目结构，并安装好依赖。

进入项目目录：

cd my-electron-app

2. 验证 Next.js 运行

npm run dev

默认使用 Turbopack，打开 http://localhost:3000 即可查看初始页面。

---

二、添加 Electron

1. 安装 Electron 及打包工具

在项目根目录安装 Electron 和 electron-builder：

npm install --save-dev electron electron-builder

• electron：Electron 核心
• electron-builder：打包成可执行文件（.exe、.dmg 等）

2. 新建主进程脚本 (main.js / main.ts)

在项目根目录（my-electron-app/）下创建一个 electron-main.ts（或 electron-main.js）文件，用来启动 Electron 的主进程。示例：

// electron-main.ts
import { app, BrowserWindow } from 'electron';
import * as path from 'path';

// 在开发模式下，你可以让 Electron 加载本地服务器地址；
// 在生产模式下，加载打包好的本地文件。
const isDev = process.env.NODE_ENV === 'development';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 建议关闭 nodeIntegration，提升安全
      contextIsolation: true,
    },
  });

  if (isDev) {
    // 开发模式：加载 localhost
    mainWindow.loadURL('http://localhost:3000');
    // 可选：打开开发者工具
    mainWindow.webContents.openDevTools();
  } else {
    // 生产模式：加载打包后的本地文件
    // Next.js build 后，默认使用 next start (本地server) 或 next export (静态文件)
    // 这里示例使用 next start 的方式
    const startUrl = `http://localhost:3000`; 
    mainWindow.loadURL(startUrl);
  }
}

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

  app.on('activate', () => {
    // macOS 上，当 dock 图标被点击且没有其他窗口打开时:
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 所有窗口关闭时退出应用 (在 macOS 除外)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

说明

1. isDev：判断 NODE_ENV 是否为 development，在开发时直接加载 http://localhost:3000；在生产环境加载真正打包/运行的服务。
2. mainWindow.loadURL()：Electron 打开一个窗口并加载对应地址/文件。
3. nodeIntegration：建议设为 false，提升安全性。

---

三、修改 package.json 脚本

在 package.json 中添加以下脚本，用于开发与打包：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "electron-main.js", // electron-builder 会从这里寻找主进程入口
  "scripts": {
    // 1. 开发模式：同时运行 Next.js + Electron
    "dev": "concurrently \"npm run dev:next\" \"npm run dev:electron\"",

    "dev:next": "next dev --no-turbo", 
    // 或者保留 turbopack: "next dev" 
    // (有时 Turbopack + Electron 可能有兼容性问题，可自行测试)

    "dev:electron": "wait-on http://localhost:3000 && electron .",

    // 2. 生产构建
    "build": "next build",

    // 3. 启动生产服务器
    "start": "next start",

    // 4. 打包 Electron 应用
    "dist": "npm run build && electron-builder"
  },
  "devDependencies": {
    "electron": "^25.0.0",
    "electron-builder": "^23.6.0",
    "concurrently": "^7.6.0",
    "wait-on": "^7.0.1",
    // 其他省略
  }
}

解释

1. dev 脚本
   • npm run dev:next：启动 Next.js 开发服务器 (默认 3000 端口)
   • npm run dev:electron：等待 localhost:3000 启动后，再运行 electron .，从 main 字段(electron-main.js) 启动主进程
   • 这两个命令用 concurrently 并行执行

build

• 先编译 Next.js，生成 .next/ 文件

start

• 启动 Next.js 生产服务器 (默认 3000 端口)

dist

• npm run build：编译 Next.js
• electron-builder：根据 electron-main.js（或 electron-main.ts 编译后的 electron-main.js）打包成桌面应用

注意：若你使用 TypeScript 写了 electron-main.ts，需要在打包前编译成 .js。可以在 dist 脚本里加一个 tsc electron-main.ts --outDir dist_electron 之类的命令，然后让 main 指向编译后文件。或者使用 ts-node 直接运行。

---

四、Electron + Next.js 生产打包流程

1. npm run build
   • 这会运行 next build，将 Next.js 项目打包到 .next/ 下。
2. npm run start（可选，本地验证）
   • 启动生产服务器 (默认 localhost:3000)
   • 可先测试在浏览器访问 http://localhost:3000 是否正常
3. npm run dist
   • 先执行 build → next build
   • 然后执行 electron-builder
   • 生成可执行文件，通常放在 dist/ 或 release/ 下（具体路径取决于 electron-builder 配置）

---

五、Electron Builder 配置 (可选)

如果你想定制打包后应用的图标、名称、平台、架构等，可以在 package.json 中添加 build 字段：

{
  "build": {
    "productName": "MyElectronApp",
    "appId": "com.mycompany.myelectronapp",
    "asar": true,
    "files": [
      "dist_electron", // 如果你把编译好的 electron-main.js 放在这个文件夹
      ".next", 
      "next.config.js",
      "package.json"
    ],
    "directories": {
      "buildResources": "resources", 
      "output": "release" // 打包产物输出目录
    },
    "mac": {
      "category": "public.app-category.productivity",
      "icon": "resources/icon.icns"
    },
    "win": {
      "icon": "resources/icon.ico"
    }
    // ...
  }
}

具体可参考 electron-builder 文档，配置图标、签名、自动更新等。

---

六、Tailwind CSS 与 Electron 的注意事项

• Tailwind 只影响在 Next.js 渲染的页面内（浏览器进程）。Electron 主进程不需要 Tailwind。
• 如果在 开发模式下使用 Turbopack 时遇到问题，可以暂时使用 next dev --no-turbo 或等待 Turbopack 更成熟的更新。

---

七、完整示例回顾

1. 项目结构

   (简化)

   my-electron-app/
   ├─ app/
   ├─ electron-main.ts
   ├─ package.json
   ├─ tailwind.config.js
   └─ ...
   

2. electron-main.ts 负责 Electron 主进程，加载本地或远程 URL

3. package.json

   脚本：

   • "dev": "concurrently \"npm run dev:next\" \"npm run dev:electron\""
   • "dist": "npm run build && electron-builder"

4. 打包结果：在 release/ 或 dist/ 目录下生成 .exe / .dmg / .AppImage 等文件。

---

八、总结

• 开发模式：npm run dev → 并行启动 Next.js + Electron，Electron 加载 http://localhost:3000。

• 生产构建：

  1. npm run build → Next.js 编译
  2. npm run dist → Electron Builder 打包

• 可执行文件：在打包完成后，你会在输出目录（dist/ 或 release/）下看到生成的安装包或可执行文件。双击即可启动你的 Electron + Next.js + Tailwind 桌面应用！

这样就完成了一个Next.js 15.1.3 + TypeScript + TailwindCSS + Electron 的完整打包流程。