Solana 钱包集成 Next.js 与 @solana/react-hooks

在 Next.js（App Router）中，使用 @solana/client 和 @solana/react-hooks 快速集成 Solana 钱包。你将创建一个连接钱包的下拉菜单和一个 SOL 转账组件。

Next.js Hooks App

资源

前置条件

Node 20+
npm

创建 Next.js 项目

Terminal

$ npx create-next-app@latest my-app
$ cd my-app

在提示时，接受所有默认设置（入门模板已包含 Tailwind，本教程会用到它的实用样式）。

安装 Solana 依赖

Terminal

$ npm install @solana/client@latest @solana/react-hooks@latest @solana/kit@latest

使用 @latest 保持依赖最新。如果你的包管理器提示 peer 警告，可以固定到当前测试通过的版本集（@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0），等新版本发布后再升级。

1. 创建 Solana Provider

app/providers.tsx 使用了简化的 SolanaProvider 属性。请设置集群（默认为 Devnet）。

2. 更新布局

用 Providers 组件包裹你的应用。更新 app/layout.tsx，导入并使用它：

这样可以将整个应用包裹在 Solana 上下文中，所有子组件都能访问钱包状态和 hooks。

3. 钱包连接按钮

通过 useConnectWallet / useDisconnectWallet 下拉菜单连接/断开 Wallet Standard 钱包。

钱包下拉选项

钱包下拉已连接

4. SOL 转账

使用 useSolTransfer 向任意地址发送 SOL 转账（ lamports 单位）。

SOL 转账表单已填写

SOL 转账成功

连接器为同一套 Wallet Standard（Phantom / Solflare / Backpack / auto-discovery）；连接后，SOL 转账会使用已连接的签名者。

5. 页面

app/page.tsx 会渲染钱包连接和 SOL 转账组件（无需 Suspense）：

6. 运行应用程序

Terminal

$ npm run dev

打开 http://localhost:3000，连接 Devnet 钱包并发送 SOL 转账。

1. 创建 Solana Provider

app/providers.tsx 使用了简化的 SolanaProvider 属性。请设置集群（默认为 Devnet）。

2. 更新布局

用 Providers 组件包裹你的应用。更新 app/layout.tsx，导入并使用它：

这样可以将整个应用包裹在 Solana 上下文中，所有子组件都能访问钱包状态和 hooks。

3. 钱包连接按钮

通过 useConnectWallet / useDisconnectWallet 下拉菜单连接/断开 Wallet Standard 钱包。

钱包下拉选项

钱包下拉已连接

4. SOL 转账

使用 useSolTransfer 向任意地址发送 SOL 转账（ lamports 单位）。

SOL 转账表单已填写

SOL 转账成功

连接器为同一套 Wallet Standard（Phantom / Solflare / Backpack / auto-discovery）；连接后，SOL 转账会使用已连接的签名者。

5. 页面

app/page.tsx 会渲染钱包连接和 SOL 转账组件（无需 Suspense）：

6. 运行应用程序

Terminal

$ npm run dev

打开 http://localhost:3000，连接 Devnet 钱包并发送 SOL 转账。

providers.tsx

"use client";

import type { SolanaClientConfig } from "@solana/client";
import { SolanaProvider } from "@solana/react-hooks";

const defaultConfig: SolanaClientConfig = {
  cluster: "devnet",
  rpc: "https://api.devnet.solana.com",
  websocket: "wss://api.devnet.solana.com"
};

export default function Providers({ children }: { children: React.ReactNode }) {
  return <SolanaProvider config={defaultConfig}>{children}</SolanaProvider>;
}

Next.js + Solana React Hooks

资源

前置条件

创建 Next.js 项目

安装 Solana 依赖

1. 创建 Solana Provider

2. 更新布局

3. 钱包连接按钮

4. SOL 转账

5. 页面

6. 运行应用程序

1. 创建 Solana Provider

2. 更新布局

3. 钱包连接按钮

4. SOL 转账

5. 页面

6. 运行应用程序

Table of Contents