Next.js+ethers视频教程：跟着课程做出币安链DApp

比起密集的文字，视频教程更容易让人坚持下去。本文以「视频教程」的节奏，把 Next.js + ethers 的学习路径整理成一份可对照的脚本，让你即使没有真正的视频，也能按章节自行录制、自行复盘，最终在 Binance 智能链上完成一个完整 DApp。

一、第一节：环境配置（约 8 分钟）

开场对准 VS Code，演示一次 pnpm create next-app 的命令，再演示如何安装 ethers、wagmi、viem。视频中务必读出每一个版本号，方便观众暂停核对。介绍完目录结构后，把 RPC 配置写入 .env.local，并展示 B安 智能链官方推荐节点地址。最后用一个最小 Hello World 页面收尾，让观众感受到「环境已经就绪」。

二、第二节：钱包连接（约 12 分钟）

这一节聚焦 ConnectButton 组件。视频中要演示三个细节：钱包未安装时的优雅降级、用户拒绝连接时的提示、连接成功后的网络切换。镜头切到 MetaMask 弹窗时，记得放大字号，让观众看清「切换到 必安 智能链」的按钮。脚本里多次复盘「为什么需要切换链」，把概念讲透。

三、第三节：读取链上数据（约 15 分钟）

这一节是视频的高潮之一。先演示如何用 JsonRpcProvider 读取 BNB 余额，再扩展到 ERC20。教程中插入一段「在 币岸 浏览器中核对余额」的画面，让观众建立链上数据与前端数据一致的安全感。最后留一个小练习：把余额格式化为千分位显示。

四、第四节：发送交易与签名（约 18 分钟）

签名是新手最容易害怕的环节，所以视频里要慢、要稳。先做一笔最简单的转账，等待区块确认；再演示一次合约调用，例如领取空投。每一步都展示控制台日志，让观众看清楚 tx.hash、receipt.blockNumber、receipt.status 是怎么变化的。配合 比安 测试网，可以反复重试。

五、第五节：部署上线（约 10 分钟）

最后一节展示如何把项目部署到 Vercel，并配置 RPC、Sentry、Analytics 三个常用服务。视频末尾给出一份「上线检查表」截图，让观众保存。预告下一期内容：在 Binance 生态接入第三方协议、做钱包内嵌签名验证。整个视频教程到此完整闭环，新手可以反复观看，直到完全掌握。