Integrasi dompet Solana dengan Next.js dan @solana/kit

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

Aplikasi Next.js Kit

Buat Proyek Next.js

Terminal

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

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

Dua penyesuaian scaffold

Output default create-next-app memerlukan dua perubahan kecil untuk tutorial ini:

Di tsconfig.json, atur "target": "ES2020" (atau yang lebih baru). Jumlah transfer menggunakan literal bigint seperti 1_000_000_000n, yang memerlukan ES2020.
Di app/globals.css, hapus blok @media (prefers-color-scheme: dark) yang dihasilkan dan aturan latar belakang body. UI ini hanya mendukung mode terang; nilai default gelap akan menimpa utilitas bg-white dan membuat halaman tidak terbaca dalam mode gelap.

Instal dependensi Solana

Terminal

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

Tutorial ini menargetkan Kit 7+, paket @solana/kit-plugin-* versi 0.13+ (0.14+ untuk @solana/kit-plugin-wallet), dan @solana/react 7+.

1. Buat Solana Provider

app/providers.tsx membuat satu klien di lingkup modul dan mempublikasikannya dengan ClientProvider. Plugin walletSigner menjadikan wallet yang terhubung sebagai pembayar biaya dan identitas; ekspor tipe klien agar komponen dapat mengetik useClient.

2. Perbarui Layout

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

Ini membungkus seluruh aplikasi dengan konteks Solana sehingga semua komponen turunan dapat mengakses klien dan hook wallet.

3. Tombol Koneksi Wallet

Dropdown untuk menghubungkan/memutuskan koneksi wallet Wallet Standard. useWallets mengembalikan wallet yang terdeteksi di browser; useConnect / useDisconnect mengembalikan sebuah ActionResult — komponen ini menggunakan dispatch, isRunning, dan error-nya. Setiap hook wallet menerima klien sebagai argumen pertamanya, jadi ambil terlebih dahulu dari useClient<AppClient>().

Opsi dropdown wallet

Dropdown wallet terhubung

4. Transfer SOL

Buat instruksi transfer dengan @solana-program/system dan kirimkan melalui client.sendTransaction. Wallet yang terhubung akan menandatangani dan membayar.

Formulir transfer SOL yang sudah diisi

Transfer SOL berhasil

Wallet berasal dari penemuan Wallet Standard; setelah terhubung, transfer SOL menggunakan penanda tangan yang terhubung sebagai pembayar biaya.

5. Halaman

app/page.tsx merender komponen koneksi wallet dan transfer SOL:

6. Jalankan Aplikasi

Terminal

$ npm run dev

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

1. Buat Solana Provider

2. Perbarui Layout

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

Ini membungkus seluruh aplikasi dengan konteks Solana sehingga semua komponen turunan dapat mengakses klien dan hook wallet.

3. Tombol Koneksi Wallet

Opsi dropdown wallet

Dropdown wallet terhubung

4. Transfer SOL

Buat instruksi transfer dengan @solana-program/system dan kirimkan melalui client.sendTransaction. Wallet yang terhubung akan menandatangani dan membayar.

Formulir transfer SOL yang sudah diisi

Transfer SOL berhasil

Wallet berasal dari penemuan Wallet Standard; setelah terhubung, transfer SOL menggunakan penanda tangan yang terhubung sebagai pembayar biaya.

5. Halaman

app/page.tsx merender komponen koneksi wallet dan transfer SOL:

6. Jalankan Aplikasi

Terminal

$ npm run dev

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

Sumber Daya

Prasyarat

Buat Proyek Next.js

Instal dependensi Solana

1. Buat Solana Provider

2. Perbarui Layout

3. Tombol Koneksi Wallet

4. Transfer SOL

5. Halaman

6. Jalankan Aplikasi

1. Buat Solana Provider

2. Perbarui Layout

3. Tombol Koneksi Wallet

4. Transfer SOL

5. Halaman

6. Jalankan Aplikasi

Daftar Isi