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