Integrazione wallet Solana con Next.js e @solana/react-hooks

Configura un'integrazione wallet Solana minimale in Next.js (App Router) con @solana/client e @solana/react-hooks. Creerai un menu a tendina per connettere il wallet e un componente per trasferimenti SOL.

Next.js Hooks App

Risorse

Prerequisiti

Node 20+
npm

Crea progetto Next.js

Terminal

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

Quando richiesto, accetta tutte le impostazioni predefinite (lo starter include Tailwind, che questo tutorial utilizza per semplici stili di utilità).

Installa le dipendenze Solana

Terminal

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

Usa @latest per rimanere aggiornato. Se il tuo package manager mostra avvisi sui peer, puoi fissare il set testato corrente (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) e aggiornare quando vengono rilasciate nuove versioni.

1. Crea Solana Provider

app/providers.tsx utilizza le props semplificate SolanaProvider. Imposta il cluster (Devnet per impostazione predefinita).

2. Aggiorna layout

Avvolgi la tua applicazione con il componente Providers. Aggiorna app/layout.tsx per importarlo e utilizzarlo:

Questo avvolge l'intera app con il contesto Solana in modo che tutti i componenti figli possano accedere allo stato del wallet e agli hooks.

3. Pulsante connessione wallet

Menu a tendina per connettere/disconnettere wallet Wallet Standard tramite useConnectWallet / useDisconnectWallet.

Opzioni dropdown del wallet

Dropdown del wallet connesso

4. Trasferimento SOL

Usa useSolTransfer per inviare un trasferimento SOL (lamport) a qualsiasi indirizzo.

Modulo di trasferimento SOL compilato

Trasferimento SOL riuscito

I connettori sono lo stesso set Wallet Standard (Phantom/Solflare/Backpack/rilevamento automatico); una volta connesso, i trasferimenti SOL utilizzano il firmatario connesso.

5. Pagina

app/page.tsx renderizza i componenti di connessione del wallet e trasferimento SOL (non è necessario Suspense):

6. Esegui l'applicazione

Terminal

$ npm run dev

Apri http://localhost:3000, connetti un wallet Devnet e invia un trasferimento SOL.

1. Crea Solana Provider

app/providers.tsx utilizza le props semplificate SolanaProvider. Imposta il cluster (Devnet per impostazione predefinita).

2. Aggiorna layout

Avvolgi la tua applicazione con il componente Providers. Aggiorna app/layout.tsx per importarlo e utilizzarlo:

Questo avvolge l'intera app con il contesto Solana in modo che tutti i componenti figli possano accedere allo stato del wallet e agli hooks.

3. Pulsante connessione wallet

Menu a tendina per connettere/disconnettere wallet Wallet Standard tramite useConnectWallet / useDisconnectWallet.

Opzioni dropdown del wallet

Dropdown del wallet connesso

4. Trasferimento SOL

Usa useSolTransfer per inviare un trasferimento SOL (lamport) a qualsiasi indirizzo.

Modulo di trasferimento SOL compilato

Trasferimento SOL riuscito

I connettori sono lo stesso set Wallet Standard (Phantom/Solflare/Backpack/rilevamento automatico); una volta connesso, i trasferimenti SOL utilizzano il firmatario connesso.

5. Pagina

app/page.tsx renderizza i componenti di connessione del wallet e trasferimento SOL (non è necessario Suspense):

6. Esegui l'applicazione

Terminal

$ npm run dev

Apri http://localhost:3000, connetti un wallet Devnet e invia un trasferimento 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

Risorse

Prerequisiti

Crea progetto Next.js

Installa le dipendenze Solana

1. Crea Solana Provider

2. Aggiorna layout

3. Pulsante connessione wallet

4. Trasferimento SOL

5. Pagina

6. Esegui l'applicazione

1. Crea Solana Provider

2. Aggiorna layout

3. Pulsante connessione wallet

4. Trasferimento SOL

5. Pagina

6. Esegui l'applicazione

Indice