这是一个创建于 628 天前的主题，其中的信息可能已经有所发展或是发生改变。
使用过 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 ，设置事件，好麻烦呀？  | 1 devliu1 2024-03-26 10:09:11 +08:00 via Android 完全没有问题，直接用 electron 加载 nextjs 的 url 就可以了 |
 | 2 miku999 2024-03-26 10:16:05 +08:00  1 google 上搜一下有开源库的 https://github.com/saltyshiomix/nextron |
 | 3 lstz 2024-03-26 10:24:38 +08:00 via Android 同使用 nextjs ，但我打算用 tauri 打包我的工具箱，直接 tauri 运行一个容器，然后指定版本命令行进行启动 (当然，需要做一些自定义的逻辑，但胜在灵活) |
| 4 lstz 2024-03-26 10:25:23 +08:00 via Android electron 没什么是用不了的，你可以本地启动一个 http 服务，然后直接让 electron 显示，效果也是 OK 的 |
 | 5 sloknyyz 2024-03-26 10:40:04 +08:00 开发流程可以从模板开始，比如这个，https://github.com/Parsadanashvili/nextjs-electron-typescript 对其它问题，只要浏览器里能实现的，electron 都能实现，都是加载一个 url 的事 |
 | 6 yohane3016 2024-03-26 10:44:58 +08:00 2 先不说你这个项目既然使用了串口等一些需要 node 支持的功能，并且有本地化需求，为啥一开始不用 electron 直接搓，而用服务端渲染那么绕的方式做的问题（就为了使用 node?)。 你对 electron 相关的认知还需加强下，“但看 Electron 官网教程，每个页面都需要 main.js 、preload.js 、index.html 、renderer.js 四个文件”这句话就不对，electron 主进程和渲染进程的详细功能/职责你不看文档你就多问问 gpt 。 给你两个方案： 1. 用 electron 套壳的话 你直接在主进程中用 child_process 起你的 nextjs 服务，启动完成新建窗口设置对应地址就好了 2. 不如把你的 nextjs 服务改成在启动完成后唤起系统浏览器，然后 pkg 包一下直接完事 |
 | 7 Sampwood 2024-03-26 11:46:59 +08:00 @yohane3016 赞同 |
 | 8 springz 2024-03-26 12:09:49 +08:00 是啊，没有服务端渲染需求为啥用 nextjs 。 |
| 9 springz 2024-03-26 12:11:07 +08:00 没有强制在一个 App 运行的话，你服务端跑一个 nextjs 的服务，Electron 直接加载 URL 好了。 |
| 10 springz 2024-03-26 12:12:55 +08:00 Electron 直接带了一个 nodejs 的环境，你直接用 https://create-react-app.dev/ 这种是对 Electron 开发方式友好的。 |
| 11 springz 2024-03-26 12:15:31 +08:00 我也赞成 @yohane3016 ，界面直接启动浏览器，你把你的 nextjs 服务包一下，启动完成后唤醒浏览器。 |
 | 12 ill OP @springz @yohane3016 react 官网推荐的框架第一个就是 nextjs ，就上手了 |
 | 13 gitignore 2024-03-26 14:21:50 +08:00 本质就是 B/S 架构，把 HTTP 换成 IPC 就 ok 了，哪有什么用不了的。 |
 | 14 archergu 2024-04-08 14:50:23 +08:00 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 这些模块啥的，用起来比较方便，代码组织架构也比较清晰。 |
Select Language