> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monad.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# 如何使用 Reown AppKit 将钱包连接到您的应用

本指南向您展示如何使用 [Reown AppKit](https://reown.com/appkit) 启用钱包连接并与 Monad 网络交互。AppKit 提供无缝的钱包连接，包括邮箱/社交登录、智能账户、一键身份验证和钱包通知。

在本教程中，我们将使用 Next.js，不过您也可以使用任何与 AppKit 兼容的其他框架。

<Note>
  AppKit 支持八种框架，包括 React、Next.js、Vue、JavaScript、React Native、Flutter、Android、iOS 和 Unity。
</Note>

**您将学到：**

* 使用 AppKit CLI 设置一个新项目
* 为 Monad 测试网配置项目
* 将钱包连接到您的应用

**完成时间：** 约 5 分钟

## 前置条件

* 系统上已安装 Node.js

## 步骤 1：创建新项目

运行 AppKit CLI 来创建一个已配置 Reown AppKit 的新项目：

```bash theme={null}
npx @reown/appkit-cli
```

按提示提供：

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：设置项目

进入您的项目目录并安装依赖：

```bash theme={null}
cd my-monad-appkit-app
npm install
```

<Note>
  您也可以使用其他包管理器，例如 `yarn`、`bun`、`pnpm` 等。
</Note>

## 步骤 3：获取您的 Project ID

示例预配置了一个仅在 `localhost` 上有效的 `projectId`。要完全配置您的项目，您需要从 [Reown 仪表板](https://dashboard.reown.com/?utm_source=monad\&utm_medium=docs\&utm_campaign=backlinks) 获取一个 `projectId`，方法如下：

1. 前往 [dashboard.reown.com](https://dashboard.reown.com/?utm_source=monad\&utm_medium=docs\&utm_campaign=backlinks) 并登录
2. 导航到您团队的 Cloud Dashboard
3. 点击 "+ Project"

<img src="https://mintcdn.com/monadfoundation-40611fb6/5Mt9_Scj9fq4fC68/static/img/guides/reown-guide/1.webp?fit=max&auto=format&n=5Mt9_Scj9fq4fC68&q=85&s=0293e2761ed2b7e90bf55031797bb600" alt="Create Project" width="2048" height="1057" data-path="static/img/guides/reown-guide/1.webp" />

4. 如果提示选择产品类型，请选择 "AppKit"（否则忽略此步骤）

<img src="https://mintcdn.com/monadfoundation-40611fb6/5Mt9_Scj9fq4fC68/static/img/guides/reown-guide/2.webp?fit=max&auto=format&n=5Mt9_Scj9fq4fC68&q=85&s=e19e18c036b1aa1e7e29198b8050f30d" alt="Enter Project Name" width="2048" height="1057" data-path="static/img/guides/reown-guide/2.webp" />

5. 选择项目名称
6. 点击 "Create"

<img src="https://mintcdn.com/monadfoundation-40611fb6/5Mt9_Scj9fq4fC68/static/img/guides/reown-guide/3.webp?fit=max&auto=format&n=5Mt9_Scj9fq4fC68&q=85&s=8c0a236b3d1c715f6bbd3bc784afbeee" alt="Select Framework" width="2048" height="1057" data-path="static/img/guides/reown-guide/3.webp" />

7. 从页面底部复制生成的 Project ID

<img src="https://mintcdn.com/monadfoundation-40611fb6/5Mt9_Scj9fq4fC68/static/img/guides/reown-guide/4.webp?fit=max&auto=format&n=5Mt9_Scj9fq4fC68&q=85&s=ffc1992d2b2fc6ba8e32b2787a02d6e3" alt="Project ID" width="2048" height="1057" data-path="static/img/guides/reown-guide/4.webp" />

## 步骤 4：配置环境变量

在项目根目录创建 `.env` 文件：

```js title=".env" theme={null}
NEXT_PUBLIC_PROJECT_ID="YOUR_PROJECT_ID_HERE"
```

将 `YOUR_PROJECT_ID_HERE` 替换为您在上一步复制的 Project ID。

<Warning>
  以 `NEXT_PUBLIC_` 开头的环境变量会暴露给客户端。仅包含非敏感的配置数据。
</Warning>

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

更新 `/src/config/index.ts` 以使用 Monad 测试网：

```ts lines title="/src/config/index.ts" theme={null}
import { mainnet, monadTestnet } from '@reown/appkit/networks'

export const networks = [monadTestnet] as [AppKitNetwork, ...AppKitNetwork[]]
```

这将您的应用配置为使用 Monad 测试网，而不是默认网络。

## 步骤 6：运行您的应用

启动开发服务器：

```bash theme={null}
npm run dev
```

您的应用将在 `http://localhost:3000` 可用。

<Note>
  如果您使用其他包管理器，可以尝试以下命令 - `yarn dev`、`pnpm dev` 或 `bun dev`。
</Note>

## 结论

您现在已经学会了如何使用 AppKit CLI 创建一个简单的应用，允许用户连接他们的钱包并与 Monad 测试网交互。

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

## 下一步做什么？

* 探索 [Reown 博客](https://reown.com/blog)
* 查看完整示例：[Reown AppKit EVM](https://github.com/rohit-710/reown-appkit-evm)