使用过 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 273 天前 via Android
完全没有问题,直接用 electron 加载 nextjs 的 url 就可以了
|
2
miku999 273 天前 1
google 上搜一下有开源库的
https://github.com/saltyshiomix/nextron |
3
lstz 273 天前 via Android
同使用 nextjs ,但我打算用 tauri 打包我的工具箱,直接 tauri 运行一个容器,然后指定版本命令行进行启动
(当然,需要做一些自定义的逻辑,但胜在灵活) |
4
lstz 273 天前 via Android
electron 没什么是用不了的,你可以本地启动一个 http 服务,然后直接让 electron 显示,效果也是 OK 的
|
5
sloknyyz 273 天前
开发流程可以从模板开始,比如这个,https://github.com/Parsadanashvili/nextjs-electron-typescript
对其它问题,只要浏览器里能实现的,electron 都能实现,都是加载一个 url 的事 |
6
yohane3016 273 天前 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 273 天前
@yohane3016 赞同
|
8
springz 273 天前
是啊,没有服务端渲染需求为啥用 nextjs 。
|
9
springz 273 天前
没有强制在一个 App 运行的话,你服务端跑一个 nextjs 的服务,Electron 直接加载 URL 好了。
|
10
springz 273 天前
Electron 直接带了一个 nodejs 的环境,你直接用 https://create-react-app.dev/ 这种是对 Electron 开发方式友好的。
|
11
springz 273 天前
我也赞成 @yohane3016 ,界面直接启动浏览器,你把你的 nextjs 服务包一下,启动完成后唤醒浏览器。
|
12
ill OP @springz @yohane3016 react 官网推荐的框架第一个就是 nextjs ,就上手了
|
13
gitignore 273 天前
本质就是 B/S 架构,把 HTTP 换成 IPC 就 ok 了,哪有什么用不了的。
|
14
archergu 260 天前
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 这些模块啥的,用起来比较方便,代码组织架构也比较清晰。 |