当前位置：首页 > news >正文

开源全站第一个Nextron(NextJS+electron)项目--NextTalk：一款集成chatgpt的实时聊天工具

news 2025/6/27 17:06:33

NextTalk

简介

该项目是一个基于Nextron(NextJS+Electron)的桌面端实时聊天工具。

但由于使用了NextJS中的ssr及api route功能，该程序只能在开发环境运行。

关于生产版本：我将其网页端部分分离，并用Pake将其打包成桌面端，生产体验安装包我放在了release里，目前只打包了windows版本。

github:Mebius1916/NextTalk: A real-time chat tool based on nextron (NextJS+electron) with integrated AI functions

觉得不错的话给个star吧~

技术栈

前端: NextJS (React) + TailwindCSS + TypeScript + ThreeJS + NextUI + MaterialUI (icons) + NextAuth + Cloudinary + Electron + Pusher + React-toastify + OpenAI + React-email

后端: NextJS (SSR) + MongoDB + Mongoose

功能

登陆、注册、重制密码与邮箱验证

在这里插入图片描述

注册和重置模块需要邮箱验证，发送code后请及时查看注册邮箱填写验证码。

聊天界面

在这里插入图片描述

右上角登出按钮可登出账号。

发送消息及图片

在这里插入图片描述

点击输入框左侧图片按钮即可发送图片。

创建聊天

在这里插入图片描述

单选创建一对一聊天，多选创建群组聊天。

右边是个3D星球，可自行旋转。

申请好友、同意申请

在这里插入图片描述

成为好友之前是不能发送消息的，请点击Add friend按钮发送好友请求。

在这里插入图片描述

对方接受到好友请求后点击消息旁的对勾即可加为好友。

圣地巡礼

在这里插入图片描述

用内联框架嵌入，因为个人很喜欢这个网站所以嵌入哈哈哈。

右下角功能键最上方有个刷新图标，点击可以重置页面。

AI助手

在这里插入图片描述

GPT3.5助手，比较粗糙，没有对生产消息做格式处理，不能生产markdown等格式只能生成普通文本格式。

修改个人头像名字、群组头像名称

在这里插入图片描述

点击聊天界面右上角即可修改自己的头像和名字。

在这里插入图片描述

点击聊天中的群聊头像，即可修改群聊头像和名称。

注意

该项目虽然是基于Nextron的，但是当我打包的时候发现Nextron生产环境是不支持NextJS的ssr及api route的（我使用了），所以这个项目只能在开发环境运行，也就是说这个项目严格意义上来说只是个nextjs项目，这就导致我并不喜欢nextron，具体体现在以下几点：

我认为api route(ssr)是NextJS中不可或缺的一部分，我之所以使用NextJS便是因为其可以快速开发全栈项目的特性，而Nextron阉割掉了这个功能就让我感觉Nextron只是拥有NextJS生态的react+electron。作者说阉割是因为安全问题，而我个人认为这个功能可以不用，但是得存在，像我这种个人开发者并不担心什么安全性问题。
Nextron中不支持app route的写法，只支持传统的pages route，这就是为什么我的项目中使用的是pages route而不是ap route这是不好的，app route才是NextJS的未来。
Nextron只支持webpack打包，我个人认为在现在webpack作为打包工具唯一的优势应该就是其生态广阔，我个人还是更加喜欢vite打包。