Skip to main content
本指南向您展示如何使用 Reown AppKit 启用钱包连接并与 Monad 网络交互。AppKit 提供无缝的钱包连接，包括邮箱/社交登录、智能账户、一键身份验证和钱包通知。 在本教程中，我们将使用 Next.js，不过您也可以使用任何与 AppKit 兼容的其他框架。
AppKit 支持八种框架，包括 React、Next.js、Vue、JavaScript、React Native、Flutter、Android、iOS 和 Unity。
您将学到：
  • 使用 AppKit CLI 设置一个新项目
  • 为 Monad 测试网配置项目
  • 将钱包连接到您的应用
完成时间： 约 5 分钟

​
前置条件

  • 系统上已安装 Node.js

​
步骤 1：创建新项目

运行 AppKit CLI 来创建一个已配置 Reown AppKit 的新项目：
按提示提供：
  1. Project Name：选择一个名称（例如 my-monad-appkit-app）
  2. Framework：选择 Next.js（或您喜欢的框架）
  3. Blockchain Library：选择要安装 Wagmi、Ethers、Solana，还是 Multichain（EVM + Solana）。在此情况下，您需要选择 Wagmi 或 Ethers，因为 Monad 是与 EVM 兼容的区块链。本教程中我们将选择 Wagmi。
CLI 将使用您所选择的配置创建一个最简的 AppKit 示例。

​
步骤 2：设置项目

进入您的项目目录并安装依赖：
您也可以使用其他包管理器，例如 yarn、bun、pnpm 等。

​
步骤 3：获取您的 Project ID

示例预配置了一个仅在 localhost 上有效的 projectId。要完全配置您的项目，您需要从 Reown 仪表板 获取一个 projectId，方法如下：
  1. 前往 dashboard.reown.com 并登录
  2. 导航到您团队的 Cloud Dashboard
  3. 点击 ”+ Project”
Create Project
  1. 如果提示选择产品类型，请选择 “AppKit”（否则忽略此步骤）
Enter Project Name
  1. 选择项目名称
  2. 点击 “Create”
Select Framework
  1. 从页面底部复制生成的 Project ID
Project ID

​
步骤 4：配置环境变量

在项目根目录创建 .env 文件：
.env
将 YOUR_PROJECT_ID_HERE 替换为您在上一步复制的 Project ID。
以 NEXT_PUBLIC_ 开头的环境变量会暴露给客户端。仅包含非敏感的配置数据。

​
步骤 5：为 Monad 测试网配置

更新 /src/config/index.ts 以使用 Monad 测试网：
/src/config/index.ts
这将您的应用配置为使用 Monad 测试网，而不是默认网络。

​
步骤 6：运行您的应用

启动开发服务器：
您的应用将在 http://localhost:3000 可用。
如果您使用其他包管理器，可以尝试以下命令 - yarn dev、pnpm dev 或 bun dev。

​
结论

您现在已经学会了如何使用 AppKit CLI 创建一个简单的应用，允许用户连接他们的钱包并与 Monad 测试网交互。 Reown AppKit 是一个强大的解决方案，供希望将钱包连接和其他 Web3 功能集成到任何 EVM 链上应用的开发者使用。只需几个简单步骤，您就可以为用户提供无缝的钱包访问、一键身份验证、社交登录和通知 —— 简化他们的体验，同时启用高级功能如法币入金和智能账户。

​
下一步做什么？