Solana wallet-integratie met Next.js en @solana/react-hooks

Stel een minimale Solana wallet-integratie in Next.js (App Router) in met @solana/client en @solana/react-hooks. Je maakt een dropdown voor wallet-verbinding en een SOL-overdrachtscomponent.

Next.js Hooks App

Next.js-project aanmaken

Terminal

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

Accepteer alle standaardinstellingen wanneer daarom wordt gevraagd (de starter bevat Tailwind, dat in deze tutorial wordt gebruikt voor eenvoudige utility-stijlen).

Solana-afhankelijkheden installeren

Terminal

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

Gebruik @latest om up-to-date te blijven. Als je package manager peer-waarschuwingen geeft, kun je vastzetten op de huidige geteste set (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) en upgraden wanneer nieuwe releases beschikbaar komen.

1. Solana Provider aanmaken

app/providers.tsx gebruikt de vereenvoudigde SolanaProvider props. Stel het cluster in (standaard Devnet).

2. Layout bijwerken

Wikkel je applicatie in met het Providers-component. Werk app/layout.tsx bij om het te importeren en te gebruiken:

Dit wikkelt de hele app in met de Solana-context, zodat alle child-componenten toegang hebben tot wallet-status en hooks.

3. Wallet Connect-knop

Dropdown om Wallet Standard wallets te verbinden/verbreken via useConnectWallet / useDisconnectWallet.

Wallet dropdown opties

Wallet dropdown verbonden

4. SOL-overdracht

Gebruik useSolTransfer om een SOL-overdracht (lamports) naar een willekeurig adres te verzenden.

SOL-overdrachtformulier ingevuld

SOL-overdracht geslaagd

Connectors zijn dezelfde Wallet Standard-set (Phantom/Solflare/Backpack/automatische detectie); eenmaal verbonden gebruiken SOL-overdrachten de verbonden ondertekenaar.

5. Pagina

app/page.tsx rendert de wallet-verbindings- en SOL-overdrachtcomponenten (geen Suspense nodig):

6. Voer de applicatie uit

Terminal

$ npm run dev

Open http://localhost:3000, verbind een Devnet-wallet en verzend een SOL-overdracht.

1. Solana Provider aanmaken

app/providers.tsx gebruikt de vereenvoudigde SolanaProvider props. Stel het cluster in (standaard Devnet).

2. Layout bijwerken

Wikkel je applicatie in met het Providers-component. Werk app/layout.tsx bij om het te importeren en te gebruiken:

Dit wikkelt de hele app in met de Solana-context, zodat alle child-componenten toegang hebben tot wallet-status en hooks.

3. Wallet Connect-knop

Dropdown om Wallet Standard wallets te verbinden/verbreken via useConnectWallet / useDisconnectWallet.

Wallet dropdown opties

Wallet dropdown verbonden

4. SOL-overdracht

Gebruik useSolTransfer om een SOL-overdracht (lamports) naar een willekeurig adres te verzenden.

SOL-overdrachtformulier ingevuld

SOL-overdracht geslaagd

Connectors zijn dezelfde Wallet Standard-set (Phantom/Solflare/Backpack/automatische detectie); eenmaal verbonden gebruiken SOL-overdrachten de verbonden ondertekenaar.

5. Pagina

app/page.tsx rendert de wallet-verbindings- en SOL-overdrachtcomponenten (geen Suspense nodig):

6. Voer de applicatie uit

Terminal

$ npm run dev

Open http://localhost:3000, verbind een Devnet-wallet en verzend een SOL-overdracht.

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

Bronnen

Vereisten

Next.js-project aanmaken

Solana-afhankelijkheden installeren

1. Solana Provider aanmaken

2. Layout bijwerken

3. Wallet Connect-knop

4. SOL-overdracht

5. Pagina

6. Voer de applicatie uit

1. Solana Provider aanmaken

2. Layout bijwerken

3. Wallet Connect-knop

4. SOL-overdracht

5. Pagina

6. Voer de applicatie uit

Inhoudsopgave