Nextjs(App Router) 开发记录

在这里插入图片描述

最近业余在开发一款智能助理产品,记录开发过程中的一些问题以备忘,也是帮其他人防坑。

主要技术栈

本项目采用了前沿的技术栈来构建一个高性能且可维护的应用。选择了 Nx 作为构建管理和单一代码库解决方案,通过模块化和插件系统来扩展和优化开发流程、支持续集成。Next.js(App Router模式)为我们提供了服务器渲染和客户端渲染的能力,同时简化了路由配置。项目主要使用 Typescript 编写,这有助于捕捉类型错误并在编译时解决它们。

界面方面,Material UI和Tailwind CSS分别作为UI组件库和原子化CSS样式方案被引入,确保了快速且一致的UI开发体验。为了实现3D图形功能,我们集成了react-three-fiber,它是Three.js的一个 React 绑定。使用 Recoil 进行状态管理,它提供了一个直观的状态管理模型。

接口层,使用Apollo Client 来发送 GraphQL 请求和缓存,并将GraphQL转换为Cypher查询,以便与图数据库Neo4j交互。为了提高开发效率,我们还利用了 GraphQL Code Generator 来自动生成代码。关系数据库读写,采用 Prisma ORM,它可以跨多种数据库环境工作,并提供了强大的类型安全特性。

采用 Next Auth 实现用户认证。为了保证代码质量,我们引入了jest进行单元测试,eslint、commitlint和prettier用于代码风格和提交规范的检查,结合 VSCode 插件实现自动格式化、提交检查。此外,项目还探索了 WebAssembly 和 WebWorker 技术以增强应用性能

  • Nx - 基于插件的单一代码库构建管理系统
  • Next.js - 开发框架,采用 App Router 模式
  • Prisma ORM: 支持多数据库的 Node.js and TypeScript ORM
  • Material UI - UI组件库
  • Tailwindcss - 原子化 CSS 样式方案
  • Typescript - 基于 Javascript 的编程语言
  • react-three-fiber - Three.js 组件
  • Apollo Client - GraphQL 客户端
  • @neo4j/graphql - 将 GraphQL 转换为 Cypher, 作为图数据库 Neo4j 查询执行层
  • Recoil - 状态管理
  • Next Auth - Web 认证
  • GraphQL Code Generator- 基于 GraphQL Schema 生成代码的工具
  • 其他: jest eslint commitlint prettier WebAssembly WebWorker docker…

Bug 坑

1. Nx 19.6.2 使用 pnpm 初始化失败

执行命令:npx create-nx-workspace --pm pnpm 可生成代码,但无法正常运行。查看错误日志:A project already exists in this directory

通过与npm创建的项目对比,发现缺少 @nx/react

解决pn add -D @nx/react, 之后 nx dev app 可运行

2. pnpm 用 dlx

pn run generate 报错:The "path" argument must be of type string. Received undefined

分析:实际执行的是 npx prisma generate --schema=./file-path ,可能是 npx 执行时缺少相关包或版本不一致导致。
解决:改用 dlx, pnpm dlx prisma generate

3. eslint 保存无法自动格式化

报错: Error: Cannot read config file,可能原因:升级依赖后 eslint server 未重启
解决:重启 VS Code 的 ESLint Server ,快捷键 Ctrl + Shift + P 输入 ESLint 选择 ESLint: Restart ESLint Server

查看 ESLint 输出:
在这里插入图片描述

技巧

1. 自定义 VSCode 折叠显示

在这里插入图片描述
.vscode/settings.json中添加:

  "explorer.fileNesting.enabled": true,"explorer.fileNesting.patterns": {"*.env": "$(capture).env.*","package.json": ".gitignore,.prettierrc,.prettierignore,.eslintrc.json,.eslintignore,.editorconfig......."}

欢迎合作

如果这篇文章对您有所帮助,欢迎点赞、分享和留言,让更多的人受益。感谢您的细心阅读,如果发现了任何错误或需要补充的地方,请随时告诉我,我会尽快处理 ^_^

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/878072.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文学习—Efficient Multi-label Classification with Many Labels

论文学习:Efficient Multi-label Classification with Many Labels 摘要2. 多标签分类相关工作2.1 Label Transformation1. **降维(Dimensionality Reduction)**2. **回归模型(Regression Model)**3. **逆变换&#xf…

【Python机器学习】NLP词中的数学——词袋

我们已经收集了一些词/词条,对这些词进行计数,并将它们归并成词干或者词元,接下来就可以做更多的事情。分析词对一些简单的任务有用,例如得到词用法的一些统计信息,或者进行关键词检索。但如果我们想知道哪些词对于某篇…

oracle备份策略

一、RMAN热备份 1、查看是否开启归档 archive log list;归档未开启 归档开启方法 – 关闭数据库,重启至mount模式 shutdown immediate startup mount– 开启归档模式 alter database archivelog;– 打开数据库 alter database open;– 检查归档模式是否打开 a…

微信小程序for循环怎么用

微信for简单使用&#xff1a; <view> <ul> <li wx:for"{{xiaoke}}" wx:key"index"> <a href"{{item.path}}">{{item.name}}</a> </li> </ul> </view> 其中" xiaoke " 是数组名称&am…

利用深度学习技术来实现街景图像的语义分割(街景图像语义分割)

本项目致力于利用深度学习技术来实现街景图像的语义分割。通过精确地识别和分类图像中的每个像素&#xff0c;该技术能够自动划分出街道、人行道、车辆、行人等各种不同的物体类别。这在智能交通系统、自动驾驶、城市规划等领域有着广泛的应用前景。 技术实现 深度学习模型&am…

zsh: command not found: brew(M系列芯片)

利用官网的命令安装完brew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"查看版本&#xff0c;提示找不到命令 % brew -v zsh: command not found: brew解决方法&#xff0c;在终端中执行以下命令&#xff0c…

git仓库删除某个历史提交

目录 问题情况1情况2 问题 如果我们在开发过程中&#xff0c;存在一些验证性的提交或者失误性的提交&#xff0c;那么这些提交我们不想要了&#xff0c;怎么办&#xff1f; 情况1 如果是想要删除某个commitid之后的所有提交 那么git reset 可以满足你 git reset --hard 你要…

Keilv5 逻辑分析仪的使用

声明&#xff1a;基于视频【事件驱动型编程和 QP/C 框架】所做的笔记 Keilv5逻辑分析仪是Keil MDK集成开发环境&#xff08;IDE&#xff09;中的一个工具&#xff0c;用于帮助开发人员进行嵌入式系统的调试和分析。 它的作用主要有&#xff1a; 监测信号&#xff1a;Keilv5逻…

【Qt | 音视频学习路线(高薪路线 AI)】

Answer 学习Qt音视频开发的学习路线可以分为以下几个阶段: 1. 基础知识准备 C++编程基础:Qt主要使用C++,因此需要有扎实的C++编程基础。计算机图形学基础:了解基本的图形学概念,如图像处理、渲染等。音视频基础:了解音视频的基本概念,如编码、解码、格式等。2. 学习Qt…

QGIS制图流程

在之前我们推送了QGIS的软件安装、插件安装、数据导入等基础操作&#xff0c;今天我们介绍一下QGIS的制图功能。QGIS的制图与ArcGIS Pro存在一定的区别&#xff0c;但是思路上相似。我们教程内容主要是参考QGIS官方文档&#xff1a; https://docs.qgis.org/3.34/en/docs/user_…

JUC并发编程-volatile

目录 1. volatile的两大特性 可见性&#xff08;Visibility&#xff09; 有序性&#xff08;Ordering&#xff09; 2. 四大屏障 3. 读写屏障插入策略 happens-before与volatile变量规则&#xff1a; 注意事项 4. 原子性 5. 禁重排 6.使用场景 传统的单例模式实现如下…

Apache Doris 使用 CBO 和 RBO 结合的优化策略

Apache Doris 在查询优化方面通过结合 RBO 和 CBO,实现了对简单和复杂查询的高效优化。RBO 负责处理常量折叠、子查询改写和谓词下推等基础优化操作,而 CBO 则在 Join Reorder 等复杂场景中发挥作用。这种结合策略使得 Apache Doris 能够在面对各种查询场景时,既能保证优化过…

大数据技术之 Flume概述、安装(1)

目录 Flume 概述 Flume 定义 为什么选用 Flume Flume 基础架构 Agent Source Sink Channel Event Flume 安装 Flume 安装部署 安装地址 安装部署 Flume 概述 Flume 定义 Flume 是 Cloudera 提供的一个高可用的、高可靠的、分布式的海量日志采集、聚合和传输的系统。Flume…

Clickhouse集群化(六)clickhosue-operator学习

1. Custom Resource元素 apiVersion: "clickhouse.altinity.com/v1" kind: "ClickHouseInstallation" metadata:name: "clickhouse-installation-test" 这是clickhouse operator自定义的资源ClickHouseInstallation 1.1. .spec.defaults spe…

Webbench1.5安装使用Ubuntu

1、安装依赖包 sudo apt-get update sudo apt-get install libtirpc-dev2、安装Webbench1.5 参考https://github.com/baiguo/webbench-1.5 # 可能需要root权限&#xff0c;我是切换到root用户才安装成功 wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.…

安卓系统 XBL阶段详解

在安卓系统的启动流程中&#xff0c;XBL&#xff08;eXtensible Boot Loader 或 Secondary Bootloader&#xff09;是一个关键阶段&#xff0c;特别是在使用QualComm&#xff08;高通&#xff09;等SOC&#xff08;System on Chip&#xff09;的设备上。以下是对XBL阶段的详细解…

小程序全局本地存储和读取数据

globalData&#xff1a;全局存储信息 定义全局数据&#xff08;在 app.js 中&#xff09;&#xff1a; 在 app.js 中&#xff0c;你可以通过 globalData 属性定义全局数据 // app.js App({globalData: {userInfo: null,systemInfo: null,theme: light},onLaunch() {console.…

怎么把两个pdf合并成一个pdf?学会这7招,1分钟轻松搞定!

新手小白如何将pdf合并成一个文件&#xff1f;pdf是目前较为主流的一种传输格式&#xff0c;内容包含了丰富的多媒体数据&#xff0c;包括文本、图像、表格等多种元素&#xff0c;很多企业和教育工作者都喜欢使用pdf格式。 pdf文件体积较小&#xff0c;兼容性高&#xff0c;平时…

大数据学习路线基础指南‌

随着信息技术的迅猛发展&#xff0c;‌大数据已成为当今社会的热门话题。‌无论是企业决策、‌市场分析还是科学研究&#xff0c;‌大数据都扮演着举足轻重的角色。‌对于想要投身这一领域的学习者来说&#xff0c;‌制定一份清晰、‌系统的大数据学习路线是至关重要的。‌提供…

Jmeter性能关注指标详解

进行性能测试时&#xff0c;有几个关键的性能指标需要关注&#xff0c;以评估系统的性能和稳定性 一、性能关注指标包含&#xff1a; 响应时间、吞吐量、错误率、资源利用率/使用率(CPU占用率、内存使用率、磁盘I/O等待率、网络I/O) Tips&#xff1a;初步查看数据结果–响应时…