打造属于你自己的 Mac（Next.js+Nest.js TS全栈项目）

最新推荐文章于 2024-08-18 10:14:52 发布
最新推荐文章于 2024-08-18 10:14:52 发布
阅读量345 收藏 2
点赞数
文章标签： javascript 前端 reactjs 前端框架 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52736385/article/details/130842646
版权
本文介绍了使用Next.js 13、Nest.js、RSC和TurboPack等技术构建Mac风格桌面应用的全过程，包括Dark/Light模式切换、全局右键菜单、Terminal模拟、即时通讯等功能。项目采用TypeScript全栈开发，利用RSC优化性能，并通过TurboRepo管理多package。文章还讨论了项目优化和Lighthouse性能指标。
摘要由CSDN通过智能技术生成

image.png

前言

自从2月份换了Mac 之后，相比于 Windows， MacOS 的 UI 非常 nice, 使用起来非常的丝滑，正好上半年也要找实习，就打算模仿一个 MacOS Desktop 作为我的一个个人项目，初步想法是通过 Next.js 13 + TurboPack 搭建一个 Desktop 的静态页面，随后为了增加项目的丰富性及互动性，使用 Nest.js 搭建了后端服务，完成了 TurboChat 即时聊天室，并且通过 TurboRepo 管理这两个 package。 整个项目 3 月初开始搭建，大概耗时1个月课余时间。

效果展示

  • Github地址 : 源码 (👏🏻欢迎 star ⭐⭐⭐)
  • 在线体验： TurboMac

TopBar 状态栏：

  • Dark / Light 模式切换
  • 全局右键增加 ContextMenu

最低0.47元/天 解锁文章
qq_52736385
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
nest-blog-api:B站全栈之巅：基于TypeScript的NodeJs框架：NestJs开发博客API (node.js+nest.js)
05-02
基于TypeScript的NodeJs框架：NestJs开发博客API (node.js+nest.js) 本项目为B站全栈之巅视频教程源码 启动 yarn 或 npm i 安装 yarn start:dev 或 npm run start:dev 启动 访问接口文档: 参考
2024版React18+Next.js14+Nest.js全栈开发复杂低代码项目21章
03-25
低代码平台技术目前在国内外都发展迅猛。早在低代码的概念完善之前， Salesforce 公司就在1999年提出了"软件终结"的口号，并面向开发者研发了force应用开发平台，允许开发者基于此快速开发 CRM 软件系统，从而开启了低代码应用开发的航程。 OutSystems 和 Mendix 分别于2001年、2005年创立，专注于低代码开发平台的建设。微软在2015年推出了融合 AI 技术的低代码平台 Power Platform 。 目前，广义的低代码是指所有可以帮助缺少编程基础的人员快速完成软件开发的技术和工具。 Gartner 认为，低代码主要有以下几个主流分支。 1．无代码开发平台 无代码开发平台属于低代码平台的一种，不提供或者仅支持非常有限的编程扩展能力，一般仅用来开发内部管理类或市场营销类表单。 2．低代码应用平台（ LCAP ) LCAP 属于狭义的低代码平台，是万金油类产品，可用来开发包含前端和后端的应用。它关注通过声明式的模型驱动和基于元数据的服务来提供快速的应用开发、部署和执行。这个市场囊括了大部分低代码技术供应商，主要产品是具备自描述性的无代码应用开发工具。
nest-next-module:一起使用nestjs和nextjs！
03-16
嵌套下一个模块 简介 在中使用做模板渲染引擎。 由于需求要做SEO，自然而然的想到了SSR。在对比Angular Universal ， nuxtjs ， nextjs之后，选择了nextjs 。 同时发现， nextjs如果要增加动态路由等功能，需要后台去做支持，于是选择了typescript支持最完善的nestjs框架。 于是如何将nestjs与nextjs一起使用，就成了我们主要解决的问题。 在nestjs和nextjs中都包含一个node http的实现上，因此需要将nestjs的页面nestjs请求，转发给nextjs去处理渲染模板，以及一些静态资源的访问也需要做转发。 在nestjs的中， 写了一个包，仔细阅读了它的比特之后，我决定自己写一个绑定模块。 原因主要是因为nest-next修正改了nestjs中express中的模板引擎，如果我还需要用express的模板渲染的话，
nestjs版若依全栈管理平台开源了
qq_46168771的博客
06-12 1489
nestjs版若依全栈管理平台开源了，一款NestjsPrismaVueVite前后端分离的全栈快速开发平台, 前端基于若依。前端采用Vue3Vite。后端采用NestPrismaioredisJwt。权限认证使用Jwt，支持多终端认证系统。支持加载动态权限菜单，多方式轻松权限控制。支持接口限流高效率开发，使用代码生成器可以一键生成前后端代码。
使用Next.js(React)作为Nest.js的模板引擎的踩坑之路
m0_37961473的博客
12-23 3623
把Next集成到Nest中的踩坑之路，经历这个过程， 我对next和nest理解都更多了一些，集成后用起来还是很舒服的
Nest-Next：将Next.js与Nest.js无缝集成
最新发布
gitblog_00518的博客
08-18 324
Nest-Next：将Next.js与Nest.js无缝集成 nest-nextRender Module to add Nextjs support for Nestjs项目地址:https://gitcode.com/gh_mirrors/ne/nest-next 在现代Web开发中，选择合适的框架组合可以显著提升开发效率和应用性能。今天，我们要介绍的是一个开源项目——Nest-Next，它...
基于Vue+Nest.js+MySQL的跨平台开源社区运营管理系统设计与实现.zip
06-13
后端该平台便是基于 Node.js 环境以及 Nest.js 框架进行项目开发。该平台选择 Mysql 作为关系型数据库管理系统。在 TypeORM 的驱动下，能省去更多的数据维护工作。 详细介绍参考：...
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
在本项目实战中，我们利用一系列现代前端和后端技术，构建了一个全面的Web应用程序。以下是项目的详细知识点解析： 1. **React**：React是Facebook开源的JavaScript库，用于构建用户界面，尤其适合构建单页应用...
next-nest:用于使用nests和nextjs启动项目的模板。 使用打字稿，Prisma，Postgres，Docker
03-06
次巢 用于使用nests和nextjs启动项目的模板。 使用Typescript，Prisma，Postgres，Docker。
train-station:带有NestJS和现代Android开发的全栈演示应用程序
04-12
火车站 由Marc NGUYEN和JB Rubio撰写，是Web + Android 2020项目的一部分。 [目录] 目标和规格 NestJS API REST API 部署在CleverCloud上： GET /站点（检索所有数据的摘要（即，仅在列表中显示最重要的信息+是否收藏）） 查询参数：页面：数字 例子： { " data " : [ { " datasetid " : " liste-des-gares " , " recordid " : " 75f37016c5e5900a1f76039bb42d982cb90b93af " , " is_favorite " : true , " libelle " : " Mulhouse-Dornach
nest-next:渲染模块添加对Nestjs的Nextjs支持
05-12
巢下 渲染模块添加对Nestjs的Nextjs支持。 nest-next提供了一个nestjs模块，用于将next.js集成到nest.js应用程序中，它允许通过nestjs控制器呈现next.js页面，并且还为页面提供初始支持。 目录 自定义错误处理程序 ErrorHandler类型定义 设置ErrorHandler 错误流（图） 示例文件夹结构 基本设定 莫诺瑞波 版本控制 执照 安装 yarn add nest-next # or npm install nest-next 对等依赖 react react-dom next 如果您将next.js与typescript一起使用（这很可能是这种情况），则还需要安装用于react和react-dom的typescript类型。 用法 将RenderModule导入到应用程序的根模块中，并调用forRootAsync方法
Next.js 学习笔记（一）——安装
Jackson_Mseven的博客
12-16 759
如果你更喜欢使用 Pages Router 而不是 App Router，你可以在项目的根目录中创建页。启动一个新的 Next.js 应用程序，该应用程序会自动为你设置所有内容。Next.js 使用文件系统路由，这意味着应用程序中的路由由文件的结构决定。该路由器允许你使用 React 的最新功能，是基于社区反馈的。将使用你的项目名称创建一个文件夹，并安装所需的依赖项。需要知道：虽然你可以在同一个项目中使用多个路由器，但。我们建议你在新项目中只使用一个路由器，以避免混淆。文件，以控制来自服务器的初始响应。
解惑三兄弟：Next.js、NestJS和Nuxt.js - 选择最适合你的全栈开发工具
qq_29510269的博客
08-08 8538
在现代 Web 开发领域，有许多技术工具和框架涌现出来，给开发者提供了更多的选择。然而，有时候一些名称相似的工具可能会让人感到困惑，特别是对于初学者。Next.jsNestJS和Nuxt.js，帮助你更好地理解它们的用途和优势，以便在你的项目中做出明智的选择。
前端服务框架调研：Next.js、Nuxt.js、Nest.js、Fastify
程序员成长指北
11-28 8107
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群概述 这次 Node.js 服务框架的调研将着点于各框架功能、请求流程的组织和介入方式...
【nestjs+mongodb】- 全栈- passport策略的用户登录
WarrenLee的博客
03-10 928
有上面的代码可知，我们需要取到jwt token校验后的user属性，因此我们需要封装对应装饰器去取到，由于该currentUser装饰器的逻辑简单，只需要取对应req的user即可import {import {
Vue + Nestjs 全栈开发，项目实战（六）：B端页面设计
ur home
05-19 442
登录页面： 注册页面： 投递记录： 职位： 账户管理： 客户管理：
node.js+mysql开源项目
07-27
有很多基于Node.js和MySQL的开源项目，以下是几个常见的项目示例： 1. Express.js：一个常用的Node.js Web应用程序框架，可以与MySQL数据库集成以...你可以根据自己的需求选择适合的项目，并根据文档进行安装和配置。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值