V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ill
V2EX  ›  Electron

请教 Nextjs 与 Electron 的可行性

  •  
  •   ill · 110 天前 · 1730 次点击
    这是一个创建于 110 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用过 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
    devliu1
        1
    devliu1  
       110 天前 via Android
    完全没有问题,直接用 electron 加载 nextjs 的 url 就可以了
    miku999
        2
    miku999  
       110 天前   ❤️ 1
    google 上搜一下有开源库的
    https://github.com/saltyshiomix/nextron
    lstz
        3
    lstz  
       110 天前 via Android
    同使用 nextjs ,但我打算用 tauri 打包我的工具箱,直接 tauri 运行一个容器,然后指定版本命令行进行启动

    (当然,需要做一些自定义的逻辑,但胜在灵活)
    lstz
        4
    lstz  
       110 天前 via Android
    electron 没什么是用不了的,你可以本地启动一个 http 服务,然后直接让 electron 显示,效果也是 OK 的
    sloknyyz
        5
    sloknyyz  
       110 天前
    开发流程可以从模板开始,比如这个,https://github.com/Parsadanashvili/nextjs-electron-typescript
    对其它问题,只要浏览器里能实现的,electron 都能实现,都是加载一个 url 的事
    yohane3016
        6
    yohane3016  
       110 天前   ❤️ 2
    先不说你这个项目既然使用了串口等一些需要 node 支持的功能,并且有本地化需求,为啥一开始不用 electron 直接搓,而用服务端渲染那么绕的方式做的问题(就为了使用 node?)。
    你对 electron 相关的认知还需加强下,“但看 Electron 官网教程,每个页面都需要 main.js 、preload.js 、index.html 、renderer.js 四个文件”这句话就不对,electron 主进程和渲染进程的详细功能/职责你不看文档你就多问问 gpt 。

    给你两个方案:
    1. 用 electron 套壳的话 你直接在主进程中用 child_process 起你的 nextjs 服务,启动完成新建窗口设置对应地址就好了
    2. 不如把你的 nextjs 服务改成在启动完成后唤起系统浏览器,然后 pkg 包一下直接用完事
    Sampwood
        7
    Sampwood  
       110 天前
    @yohane3016 赞同
    springz
        8
    springz  
       110 天前
    是啊,没有服务端渲染需求为啥用 nextjs 。
    springz
        9
    springz  
       110 天前
    没有强制在一个 App 运行的话,你服务端跑一个 nextjs 的服务,Electron 直接加载 URL 好了。
    springz
        10
    springz  
       110 天前
    Electron 直接带了一个 nodejs 的环境,你直接用 https://create-react-app.dev/ 这种是对 Electron 开发方式友好的。
    springz
        11
    springz  
       110 天前
    我也赞成 @yohane3016 ,界面直接启动浏览器,你把你的 nextjs 服务包一下,启动完成后唤醒浏览器。
    ill
        12
    ill  
    OP
       110 天前
    @springz @yohane3016 react 官网推荐的框架第一个就是 nextjs ,就上手了
    gitignore
        13
    gitignore  
       110 天前
    本质就是 B/S 架构,把 HTTP 换成 IPC 就 ok 了,哪有什么用不了的。
    archergu
        14
    archergu  
       97 天前
    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 这些模块啥的,用起来比较方便,代码组织架构也比较清晰。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2492 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 07:22 · PVG 15:22 · LAX 00:22 · JFK 03:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.