Tích hợp ví Solana với Next.js và @solana/kit

Thiết lập tích hợp ví Solana tối giản trong Next.js (App Router) với @solana/kit, các plugin kit và @solana/react. Bạn sẽ tạo một dropdown kết nối ví và một component chuyển SOL.

Next.js Kit App

Tạo dự án Next.js

Terminal

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

Khi được nhắc, hãy chấp nhận tất cả các tùy chọn mặc định (bản khởi tạo đã bao gồm Tailwind, được hướng dẫn này sử dụng cho các kiểu tiện ích đơn giản).

Hai điều chỉnh scaffold

Đầu ra mặc định của create-next-app cần hai thay đổi nhỏ cho hướng dẫn này:

Trong tsconfig.json, đặt "target": "ES2020" (hoặc cao hơn). Các số tiền chuyển sử dụng các literal bigint như 1_000_000_000n, yêu cầu ES2020.
Trong app/globals.css, xóa block @media (prefers-color-scheme: dark) được tạo sẵn và quy tắc background body. Giao diện này chỉ dùng chế độ sáng; các giá trị mặc định tối sẽ ghi đè tiện ích bg-white và khiến trang không đọc được ở chế độ tối.

Cài đặt các phụ thuộc Solana

Terminal

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

Hướng dẫn này nhắm đến Kit 7+, các gói @solana/kit-plugin-* tại phiên bản 0.13+ (0.14+ cho @solana/kit-plugin-wallet) và @solana/react 7+.

1. Tạo Solana Provider

app/providers.tsx khởi tạo một client ở phạm vi module và công bố nó thông qua ClientProvider. Plugin walletSigner đặt ví đã kết nối làm người thanh toán phí và danh tính; xuất kiểu client để các component có thể dùng kiểu useClient.

2. Cập Nhật Layout

Bọc ứng dụng của bạn bằng component Providers. Cập nhật app/layout.tsx để import và sử dụng nó:

Điều này bọc toàn bộ ứng dụng trong Solana context, cho phép tất cả các component con có thể truy cập client và các hook ví.

3. Nút Kết Nối Ví

Menu thả xuống để kết nối/ngắt kết nối các ví Wallet Standard. useWallets trả về các ví được phát hiện trong trình duyệt; useConnect / useDisconnect trả về một ActionResult — component này sử dụng dispatch, isRunning và error của nó. Mọi hook ví đều nhận client làm đối số đầu tiên, vì vậy hãy lấy nó từ useClient<AppClient>() trước.

Tùy chọn menu thả xuống của ví

Ví đã kết nối trong menu thả xuống

4. Chuyển SOL

Tạo một lệnh chuyển tiền với @solana-program/system và gửi qua client.sendTransaction. Ví đã kết nối sẽ ký và thanh toán phí.

Form chuyển SOL đã điền

Chuyển SOL thành công

Các ví được phát hiện thông qua Wallet Standard; sau khi kết nối, giao dịch chuyển SOL sử dụng người ký đã kết nối làm người thanh toán phí.

5. Trang

app/page.tsx hiển thị các component kết nối ví và chuyển SOL:

6. Chạy Ứng Dụng

Terminal

$ npm run dev

Mở http://localhost:3000, kết nối ví Devnet và gửi một giao dịch chuyển SOL.

1. Tạo Solana Provider

2. Cập Nhật Layout

Bọc ứng dụng của bạn bằng component Providers. Cập nhật app/layout.tsx để import và sử dụng nó:

Điều này bọc toàn bộ ứng dụng trong Solana context, cho phép tất cả các component con có thể truy cập client và các hook ví.

3. Nút Kết Nối Ví

Tùy chọn menu thả xuống của ví

Ví đã kết nối trong menu thả xuống

4. Chuyển SOL

Tạo một lệnh chuyển tiền với @solana-program/system và gửi qua client.sendTransaction. Ví đã kết nối sẽ ký và thanh toán phí.

Form chuyển SOL đã điền

Chuyển SOL thành công

Các ví được phát hiện thông qua Wallet Standard; sau khi kết nối, giao dịch chuyển SOL sử dụng người ký đã kết nối làm người thanh toán phí.

5. Trang

app/page.tsx hiển thị các component kết nối ví và chuyển SOL:

6. Chạy Ứng Dụng

Terminal

$ npm run dev

Mở http://localhost:3000, kết nối ví Devnet và gửi một giao dịch chuyển 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

Tài nguyên

Điều kiện tiên quyết

Tạo dự án Next.js

Cài đặt các phụ thuộc Solana

1. Tạo Solana Provider

2. Cập Nhật Layout

3. Nút Kết Nối Ví

4. Chuyển SOL

5. Trang

6. Chạy Ứng Dụng

1. Tạo Solana Provider

2. Cập Nhật Layout

3. Nút Kết Nối Ví

4. Chuyển SOL

5. Trang

6. Chạy Ứng Dụng

Mục lục