请教 Nextjs 与 Electron 的可行性

[ill]

使用过 nextjs 开发一些页面，感觉体验不错

需求：

本地应用，给小白使用，每次都需要 npm run start 启动很不优雅，想打包成一个可执行程序

应用需要使用一些串口、ws 、加密的 API ，所以一些服务纯前端实现不了，需要运行在 Nodejs 里

统一前端浏览器内核版本

不太想使用 Nextron 框架

了解到 Electron=Nodejs+Chromium ，感觉很对口，但看 Electron 官网教程，每个页面都需要 main.js 、preload.js 、index.html 、renderer.js 四个文件，逻辑也写在里面，这个开发体验感觉和 Nextjs 不太一样。

我想的是 Nextjs 跑在 Nodejs 里面，Chromium 渲染 url 页面，这样开发体验基本保持 Nextjs 一样。打包后用户能一键打开。

问题：

1  是我把开发流程想简单了？正常的流程是什么样？

2  谷歌看两三篇文章好像是说 Nextjs 的 App Router 在 Electron 中没法使用？

3  我看官网的方式，每次都需要在 html 设置 id ，然后 getElementById ，设置事件，好麻烦呀？

[devliu1]

完全没有问题，直接用 electron 加载 nextjs 的 url 就可以了

[miku999]

google 上搜一下有开源库的
https://github.com/saltyshiomix/nextron

[lstz]

同使用 nextjs ，但我打算用 tauri 打包我的工具箱，直接 tauri 运行一个容器，然后指定版本命令行进行启动

(当然，需要做一些自定义的逻辑，但胜在灵活)

[lstz]

electron 没什么是用不了的，你可以本地启动一个 http 服务，然后直接让 electron 显示，效果也是 OK 的

[sloknyyz]

开发流程可以从模板开始，比如这个，https://github.com/Parsadanashvili/nextjs-electron-typescript
对其它问题，只要浏览器里能实现的，electron 都能实现，都是加载一个 url 的事

[yohane3016]

先不说你这个项目既然使用了串口等一些需要 node 支持的功能，并且有本地化需求，为啥一开始不用 electron 直接搓，而用服务端渲染那么绕的方式做的问题（就为了使用 node?)。
你对 electron 相关的认知还需加强下，“但看 Electron 官网教程，每个页面都需要 main.js 、preload.js 、index.html 、renderer.js 四个文件”这句话就不对，electron 主进程和渲染进程的详细功能/职责你不看文档你就多问问 gpt 。

给你两个方案：
1. 用 electron 套壳的话 你直接在主进程中用 child_process 起你的 nextjs 服务，启动完成新建窗口设置对应地址就好了
2. 不如把你的 nextjs 服务改成在启动完成后唤起系统浏览器，然后 pkg 包一下直接用完事

[Sampwood]

@yohane3016 赞同

[springz]

是啊，没有服务端渲染需求为啥用 nextjs 。

[springz]

没有强制在一个 App 运行的话，你服务端跑一个 nextjs 的服务，Electron 直接加载 URL 好了。

[springz]

Electron 直接带了一个 nodejs 的环境，你直接用 https://create-react-app.dev/ 这种是对 Electron 开发方式友好的。

[springz]

我也赞成 @yohane3016 ，界面直接启动浏览器，你把你的 nextjs 服务包一下，启动完成后唤醒浏览器。

[ill]

@springz @yohane3016 react 官网推荐的框架第一个就是 nextjs ，就上手了

[gitignore]

本质就是 B/S 架构，把 HTTP 换成 IPC 就 ok 了，哪有什么用不了的。

[archergu]

next 我倒是没有尝试，我觉得这种架构了 next 还是让它做好 ssr 就行了。nest.js 我倒是集成了，效果很好，在 electron 的主进程里像写后端那样。

vue+nestjs: https://github.com/ArcherGu/fast-vite-nestjs-electron
vue+个人依赖注入小框架： https://github.com/ArcherGu/fast-vite-electron
react+nestjs: https://github.com/ArcherGu/vite-react-nestjs-electron

还有一套自己搞的 monorepo 模板：
https://github.com/Doubleshotjs/template-react-nest
https://github.com/Doubleshotjs/template-vue-nest

上面的模板主要是将 nestjs 这个后端框架集成到了 electron 的主进程中，然后 ipc 可以通过装饰器的方式进行绑定，让这个主进程看上去像一个后端，顺便再把 nestjs 的丰富生态也接入了，什么 typeorm ，sqlite 这些模块啥的，用起来比较方便，代码组织架构也比较清晰。