使用 Next.js 和 @solana/kit 集成 Solana 钱包

使用 @solana/kit、kit 插件和 @solana/react，在 Next.js（App Router）中搭建最简化的 Solana 钱包集成。你将创建一个连接钱包的下拉菜单和一个 SOL 转账组件。

Next.js Kit App

创建 Next.js 项目

Terminal

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

出现提示时，接受所有默认选项（初始模板已包含 Tailwind，本教程将使用其简单的工具类样式）。

两处脚手架调整

默认的 create-next-app 输出需要针对本教程进行两处小改动：

在 tsconfig.json 中，将 "target" 设置为 "ES2020"（或更高版本）。转账金额使用了 bigint 字面量（如 1_000_000_000n），需要 ES2020 支持。
在 app/globals.css 中，删除生成的 @media (prefers-color-scheme: dark) 块以及 body 背景规则。此 UI 仅支持浅色模式；保留深色默认样式会覆盖 bg-white 工具类，导致页面在深色模式下无法正常显示。

安装 Solana 依赖

Terminal

$ npm install @solana/kit @solana/kit-plugin-rpc @solana/kit-plugin-wallet @solana/react @solana-program/system

本教程面向 Kit 7+、@solana/kit-plugin-* 系列包 0.13+（@solana/kit-plugin-wallet 需 0.14+）以及 @solana/react 7+。

1. 创建 Solana Provider

app/providers.tsx 在模块作用域构建一个客户端，并通过 ClientProvider 发布。walletSigner 插件将已连接的钱包设置为手续费支付方和身份标识；导出客户端类型，以便组件可以为 useClient 指定类型。

2. 更新 Layout

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

这将使整个应用被 Solana 上下文包裹，使所有子组件都能访问客户端和钱包 Hook。

3. 钱包连接按钮

用于连接/断开 Wallet Standard 钱包的下拉菜单。useWallets 返回浏览器中发现的钱包；useConnect / useDisconnect 返回一个 ActionResult —— 该组件使用其 dispatch、isRunning 和 error 字段。每个钱包 Hook 都以客户端作为第一个参数，因此请先从 useClient<AppClient>() 中获取它。

钱包下拉选项

钱包下拉已连接

4. SOL 转账

使用 @solana-program/system 构建转账指令，并通过 client.sendTransaction 发送。已连接的钱包负责签名并支付手续费。

SOL 转账表单已填写

SOL 转账成功

钱包通过 Wallet Standard 发现机制接入；连接后，SOL 转账将使用已连接的签名者作为手续费支付方。

5. 页面

app/page.tsx 渲染钱包连接和 SOL 转账组件：

6. 运行应用

Terminal

$ npm run dev

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

1. 创建 Solana Provider

2. 更新 Layout

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

这将使整个应用被 Solana 上下文包裹，使所有子组件都能访问客户端和钱包 Hook。

3. 钱包连接按钮

钱包下拉选项

钱包下拉已连接

4. SOL 转账

使用 @solana-program/system 构建转账指令，并通过 client.sendTransaction 发送。已连接的钱包负责签名并支付手续费。

SOL 转账表单已填写

SOL 转账成功

钱包通过 Wallet Standard 发现机制接入；连接后，SOL 转账将使用已连接的签名者作为手续费支付方。

5. 页面

app/page.tsx 渲染钱包连接和 SOL 转账组件：

6. 运行应用

Terminal

$ npm run dev

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

providers.tsx

"use client";

import { createClient } from "@solana/kit";
import { solanaRpc } from "@solana/kit-plugin-rpc";
import { walletSigner } from "@solana/kit-plugin-wallet";
import { ClientProvider } from "@solana/react";

const rpcUrl =
  process.env.NEXT_PUBLIC_SOLANA_RPC_URL ?? "https://api.devnet.solana.com";

export const client = createClient()
  .use(walletSigner({ chain: "solana:devnet" }))
  .use(solanaRpc({ rpcUrl }));

export type AppClient = Awaited<typeof client>;

export default function Providers({ children }: { children: React.ReactNode }) {
  return <ClientProvider client={client}>{children}</ClientProvider>;
}

Next.js + Kit

相关资源

前置条件

创建 Next.js 项目

安装 Solana 依赖

1. 创建 Solana Provider

2. 更新 Layout

3. 钱包连接按钮

4. SOL 转账

5. 页面

6. 运行应用

1. 创建 Solana Provider

2. 更新 Layout

3. 钱包连接按钮

4. SOL 转账

5. 页面

6. 运行应用

Table of Contents