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

Thiết lập tích hợp ví Solana tối giản trong Next.js (App Router) với @solana/client và @solana/react-hooks. Bạn sẽ tạo một menu thả xuống kết nối ví và một thành phần chuyển khoản SOL.

Next.js Hooks App

Tạo dự án Next.js

Terminal

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

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

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

Terminal

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

Sử dụng @latest để luôn cập nhật. Nếu trình quản lý gói của bạn hiển thị cảnh báo peer, bạn có thể cố định vào bộ đã kiểm tra hiện tại (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) và nâng cấp khi có phiên bản mới.

1. Tạo Solana Provider

app/providers.tsx sử dụng các props SolanaProvider đơn giản hóa. Đặt cluster (Devnet theo mặc định).

2. Cập nhật Layout

Bọc ứng dụng của bạn với thành phần 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 với ngữ cảnh Solana để tất cả các thành phần con có thể truy cập trạng thái ví và hooks.

3. Nút kết nối ví

Menu thả xuống để kết nối/ngắt kết nối ví Wallet Standard thông qua useConnectWallet / useDisconnectWallet.

Tùy chọn menu ví

Menu ví đã kết nối

4. Chuyển SOL

Sử dụng useSolTransfer để gửi giao dịch chuyển SOL (lamports) đến bất kỳ địa chỉ nào.

Biểu mẫu chuyển SOL đã điền

Chuyển SOL thành công

Các connector là cùng bộ Wallet Standard (Phantom/Solflare/Backpack/tự động phát hiện); sau khi kết nối, việc chuyển SOL sử dụng signer đã kết nối.

5. Trang

app/page.tsx hiển thị các component kết nối ví và chuyển SOL (không cần Suspense):

6. Chạy ứng dụng

Terminal

$ npm run dev

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

1. Tạo Solana Provider

app/providers.tsx sử dụng các props SolanaProvider đơn giản hóa. Đặt cluster (Devnet theo mặc định).

2. Cập nhật Layout

Bọc ứng dụng của bạn với thành phần 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 với ngữ cảnh Solana để tất cả các thành phần con có thể truy cập trạng thái ví và hooks.

3. Nút kết nối ví

Menu thả xuống để kết nối/ngắt kết nối ví Wallet Standard thông qua useConnectWallet / useDisconnectWallet.

Tùy chọn menu ví

Menu ví đã kết nối

4. Chuyển SOL

Sử dụng useSolTransfer để gửi giao dịch chuyển SOL (lamports) đến bất kỳ địa chỉ nào.

Biểu mẫu chuyển SOL đã điền

Chuyển SOL thành công

Các connector là cùng bộ Wallet Standard (Phantom/Solflare/Backpack/tự động phát hiện); sau khi kết nối, việc chuyển SOL sử dụng signer đã kết nối.

5. Trang

app/page.tsx hiển thị các component kết nối ví và chuyển SOL (không cần Suspense):

6. Chạy ứng dụng

Terminal

$ npm run dev

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

Tài nguyên

Yêu cầu

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