Documentazione SolanaFrontend

Next.js + Kit

Configura un'integrazione minimale del wallet Solana in Next.js (App Router) con @solana/kit, i plugin kit e @solana/react. Creerai un dropdown per connettere il wallet e un componente per il trasferimento di SOL.

Next.js Kit AppNext.js Kit App

Risorse

Prerequisiti

  • Node 20+
  • npm

Crea il 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à).

Due modifiche allo scaffold

L'output predefinito di create-next-app richiede due piccole modifiche per questo tutorial:

  • In tsconfig.json, imposta "target": "ES2020" (o versione successiva). Gli importi dei trasferimenti usano letterali bigint come 1_000_000_000n, che richiedono ES2020.
  • In app/globals.css, rimuovi il blocco @media (prefers-color-scheme: dark) generato e la regola di sfondo body. Questa UI è solo in modalità chiara; le impostazioni predefinite scure altrimenti sovrascrivono l'utility bg-white e rendono la pagina illeggibile in modalità scura.

Installa le dipendenze Solana

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

Questo tutorial è destinato a Kit 7+, ai pacchetti @solana/kit-plugin-* alla versione 0.13+ (0.14+ per @solana/kit-plugin-wallet), e a @solana/react 7+.

1. Crea il Provider Solana

app/providers.tsx crea un singolo client a livello di modulo e lo pubblica con ClientProvider. Il plugin walletSigner imposta il wallet connesso come fee payer e identity; esporta il tipo del client in modo che i componenti possano tipizzare useClient.

2. Aggiorna il 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 figlio possano accedere al client e agli hook del wallet.

3. Pulsante di Connessione Wallet

Menu a tendina per connettere/disconnettere i wallet Wallet Standard. useWallets restituisce i wallet rilevati nel browser; useConnect / useDisconnect restituiscono un ActionResult — questo componente utilizza i suoi campi dispatch, isRunning e error. Ogni hook del wallet accetta il client come primo argomento, quindi recuperalo da useClient<AppClient>() prima.

Opzioni del menu a tendina del walletOpzioni del menu a tendina del wallet

Wallet connesso nel menu a tendinaWallet connesso nel menu a tendina

4. Trasferimento SOL

Crea un'istruzione di trasferimento con @solana-program/system e inviala tramite client.sendTransaction. Il wallet connesso firma e paga.

Modulo di trasferimento SOL compilatoModulo di trasferimento SOL compilato

Trasferimento SOL completato con successoTrasferimento SOL completato con successo

I wallet vengono rilevati tramite Wallet Standard discovery; una volta connessi, il trasferimento SOL utilizza il firmatario connesso come fee payer.

5. Pagina

app/page.tsx esegue il rendering dei componenti di connessione wallet e trasferimento SOL:

6. Avvia l'Applicazione

Terminal
$ 
npm run dev

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

1. Crea il Provider Solana

app/providers.tsx crea un singolo client a livello di modulo e lo pubblica con ClientProvider. Il plugin walletSigner imposta il wallet connesso come fee payer e identity; esporta il tipo del client in modo che i componenti possano tipizzare useClient.

2. Aggiorna il 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 figlio possano accedere al client e agli hook del wallet.

3. Pulsante di Connessione Wallet

Menu a tendina per connettere/disconnettere i wallet Wallet Standard. useWallets restituisce i wallet rilevati nel browser; useConnect / useDisconnect restituiscono un ActionResult — questo componente utilizza i suoi campi dispatch, isRunning e error. Ogni hook del wallet accetta il client come primo argomento, quindi recuperalo da useClient<AppClient>() prima.

Opzioni del menu a tendina del walletOpzioni del menu a tendina del wallet

Wallet connesso nel menu a tendinaWallet connesso nel menu a tendina

4. Trasferimento SOL

Crea un'istruzione di trasferimento con @solana-program/system e inviala tramite client.sendTransaction. Il wallet connesso firma e paga.

Modulo di trasferimento SOL compilatoModulo di trasferimento SOL compilato

Trasferimento SOL completato con successoTrasferimento SOL completato con successo

I wallet vengono rilevati tramite Wallet Standard discovery; una volta connessi, il trasferimento SOL utilizza il firmatario connesso come fee payer.

5. Pagina

app/page.tsx esegue il rendering dei componenti di connessione wallet e trasferimento SOL:

6. Avvia l'Applicazione

Terminal
$ 
npm run dev

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

}

Is this page helpful?

Precedente

React

Successivo

Migrazione a Kit

Indice dei contenuti

Modifica pagina
Usa Solana
Sviluppa
Enterprise
Prodotti
Ecosistema
Agenti AI
© 2026 Solana Foundation. Tutti i diritti riservati.