如何使用next js 13.4制作电子？

Question

我正在深入研究一个新项目，我想使用 Next.js 13.4 和 Electron 构建一个桌面应用程序。但我找不到这个组合的任何样板。我确实尝试过 Vite，但也没有运气。

我将非常感谢任何有关如何开展该项目的建议或建议。是否有我可能错过的现有样板？或者也许有其他框架或工具可以更好地与 Next.js 13.4 和 Electron 配合使用？

Answer 1

这两种技术将来可能会更加兼容。与此同时，我们必须手动配置它们并在主进程上执行后端服务（CRUD和事件处理程序），而不是依赖NextJs的API路由。然后，我们使用上下文 API 在两个进程（主进程和渲染器）之间传递数据并进行通信。 您可以使用

[electron-serve](https://www.npmjs.com/package/electron-serve)

npm 包来获得客户端路由体验，例如 React-router。

在您喜欢的文件夹结构中配置 electro 和 next。例如。

rootdir/app -- 下一个

rootdir/main——电子

将您的

package.json

脚本设置为 1. 同时运行 next 和 electro 进程。你可以使用 npm 来做到这一点，但是调试错误将是地狱，所以使用

[concurrently](https://www.npmjs.com/package/concurrently)

npm 包

"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",
  images: {
    unoptimized: true
  }
  ...
}

Electron 静态运行输出文件。

注意： 下一个应用程序路由器的这种方法存在一些问题。可能是因为应用程序路由器中使用的服务器组件与电子的单页应用程序期望发生冲突，如果您使其工作，请在此处分享。最好使用页面路由器。

您可以查看这篇文章的代码示例... https://rbfraphael.medium.com/building-desktop-apps-with-electron-next-js-without-nextron-01bbf1fdd72e