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 技术以增强应用性能

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

技巧

1. 自定义 VSCode 折叠显示

.vscode/settings.json中添加:

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

欢迎合作

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

相关推荐
麦兜*1 天前
MongoDB 与 GraphQL 结合:现代 API 开发新范式
java·数据库·spring boot·mongodb·spring·maven·graphql
解道Jdon2 天前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
0wioiw03 天前
Nodejs(④GraphQL)
后端·graphql
Sui_Network3 天前
GraphQL RPC 与通用索引器公测介绍:为 Sui 带来更强大的数据层
javascript·人工智能·后端·rpc·去中心化·区块链·graphql
GISer_Jing5 天前
滴滴二面(准备二)
前端·javascript·vue·reactjs
幂简集成8 天前
GraphQL API 性能优化实战:在线编程作业平台指南
后端·性能优化·graphql
三思而后行,慎承诺11 天前
requestIdleCallback 和 MessageChannel
javascript·reactjs
Flyfreelylss12 天前
前端实现解析【导入】数据后调用批量处理接口
前端·reactjs
鼠鼠我捏,要死了捏23 天前
GraphQL 与 REST 在微服务架构中的对比与设计实践
graphql·rest·microservices
hayson1 个月前
nebula graph orm框架 norm 用法解析 - 结构迁移、标签配置
orm·graphql