脚本命令

直接看package.json 推荐使用yarn来操作，当前node 版本18.14.0, yarn版本1.22.19

目录说明

next.config.js 是next的配置文件
server.js 是代理文件，对应的package.json/script/dev 需要做对应修改才生效
tsconfig.json 主要做别名设置 '@/*'
.prettierrc 格式化文件的一些自定义配置
src/conponents 项目的主要逻辑在MyModal里

项目说明

项目并非从next.js 官网创建，而是针对区块链dapp在网上找的dapp开发模板+案例

• wagmi是对web3库进行的react hook封装，很方便就能获取链上数据。
  但是充值等某些操作涉及到合约相关（同事建议）故充提相关功能使用了原生web3库,具体可以查看src/components/MyModal/index.tsx

• rainbowkit是连接钱包的一些封装，本项目在TP钱包下使用，故不需要该插件

• 项目使用了redux存储钱包地址和签名，但并没有太多实际用途，（仅是为了学习使用而使用）

• chakra UI 是开发过程很友好的ui库，尽管后期维护代码看起来臃肿，但它实现了css-in-js 但不知什么原因部分组件没有生效（抽屉），后面引入了antd库的小部分组件

• 多语言模块使用i18next, 缺点是指定在public/locales下创建特定的文件

项目有一些本人费解的地方：

1. 项目生成的是多页面应用，当浏览器直接访问localhost:3000/product 时并未触发pages/index.tsx的effect逻辑
2. 该项目在oppo手机TP钱包下的浏览器显示白屏，报错信息为“Uncaught SyntaxError: Unexpected token '.' ”, 推测是某个包的es6语法未翻译成es5语法，也可能是oppo系统问题

另外，因为项目工期太赶，有很多优化的地方并没有处理，如输入框校验，接口报错逻辑等处理并不算完善，

使用案例

切换到example分支 项目参考：https://juejin.cn/post/7137226010453344264#heading-0 案例网址：https://nextjs-wagmi-template.vercel.app/