Integrasi dompet Solana dengan Next.js dan @solana/react-hooks

Siapkan integrasi dompet Solana minimal di Next.js (App Router) dengan @solana/client dan @solana/react-hooks. Anda akan membuat dropdown koneksi dompet dan komponen transfer SOL.

Aplikasi Next.js Hooks

Buat proyek Next.js

Terminal

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

Saat diminta, terima semua default (starter menyertakan Tailwind, yang digunakan tutorial ini untuk gaya utilitas sederhana).

Instal dependensi Solana

Terminal

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

Gunakan @latest untuk tetap terkini. Jika package manager Anda menampilkan peringatan peer, Anda dapat menetapkan ke set yang telah diuji saat ini (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) dan upgrade saat rilis baru tersedia.

1. Buat Solana Provider

app/providers.tsx menggunakan props SolanaProvider yang disederhanakan. Atur cluster (Devnet secara default).

2. Perbarui layout

Bungkus aplikasi Anda dengan komponen Providers. Perbarui app/layout.tsx untuk mengimpor dan menggunakannya:

Ini membungkus seluruh aplikasi dengan konteks Solana sehingga semua komponen anak dapat mengakses state dompet dan hooks.

3. Tombol koneksi dompet

Dropdown untuk menghubungkan/memutuskan dompet Wallet Standard melalui useConnectWallet / useDisconnectWallet.

Opsi dropdown dompet

Dropdown dompet terhubung

4. Transfer SOL

Gunakan useSolTransfer untuk mengirim transfer SOL (lamport) ke alamat mana pun.

Formulir transfer SOL terisi

Transfer SOL berhasil

Konektor adalah set Wallet Standard yang sama (Phantom/Solflare/Backpack/deteksi otomatis); setelah terhubung, transfer SOL menggunakan penandatangan yang terhubung.

5. Halaman

app/page.tsx merender komponen koneksi dompet dan transfer SOL (tidak memerlukan Suspense):

6. Jalankan aplikasi

Terminal

$ npm run dev

Buka http://localhost:3000, hubungkan dompet Devnet, dan kirim transfer SOL.

1. Buat Solana Provider

app/providers.tsx menggunakan props SolanaProvider yang disederhanakan. Atur cluster (Devnet secara default).

2. Perbarui layout

Bungkus aplikasi Anda dengan komponen Providers. Perbarui app/layout.tsx untuk mengimpor dan menggunakannya:

Ini membungkus seluruh aplikasi dengan konteks Solana sehingga semua komponen anak dapat mengakses state dompet dan hooks.

3. Tombol koneksi dompet

Dropdown untuk menghubungkan/memutuskan dompet Wallet Standard melalui useConnectWallet / useDisconnectWallet.

Opsi dropdown dompet

Dropdown dompet terhubung

4. Transfer SOL

Gunakan useSolTransfer untuk mengirim transfer SOL (lamport) ke alamat mana pun.

Formulir transfer SOL terisi

Transfer SOL berhasil

Konektor adalah set Wallet Standard yang sama (Phantom/Solflare/Backpack/deteksi otomatis); setelah terhubung, transfer SOL menggunakan penandatangan yang terhubung.

5. Halaman

app/page.tsx merender komponen koneksi dompet dan transfer SOL (tidak memerlukan Suspense):

6. Jalankan aplikasi

Terminal

$ npm run dev

Buka http://localhost:3000, hubungkan dompet Devnet, dan kirim transfer 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

Sumber daya

Prasyarat

Buat proyek Next.js

Instal dependensi Solana

1. Buat Solana Provider

2. Perbarui layout

3. Tombol koneksi dompet

4. Transfer SOL

5. Halaman

6. Jalankan aplikasi

1. Buat Solana Provider

2. Perbarui layout

3. Tombol koneksi dompet

4. Transfer SOL

5. Halaman

6. Jalankan aplikasi

Daftar Isi