Solana wallet integration with Next.js and @solana/react-hooks

Set up a minimal Solana wallet integration in Next.js (App Router) with @solana/client and @solana/react-hooks. You'll create a connect wallet dropdown and a SOL transfer component.

Next.js Hooks App

Create Next.js Project

Terminal

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

When prompted, accept all defaults (the starter includes Tailwind, which this tutorial uses for simple utility styles).

Install Solana dependencies

Terminal

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

Use @latest to stay current. If your package manager surfaces peer warnings, you can pin to the current tested set (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) and upgrade when new releases land.

1. Create Solana Provider

app/providers.tsx uses the simplified SolanaProvider props. Set the cluster (Devnet by default).

2. Update Layout

Wrap your application with the Providers component. Update app/layout.tsx to import and use it:

This wraps the entire app with the Solana context so all child components can access wallet state and hooks.

3. Wallet Connect Button

Dropdown to connect/disconnect Wallet Standard wallets via useConnectWallet / useDisconnectWallet.

Wallet dropdown options

Wallet dropdown connected

4. SOL Transfer

Use useSolTransfer to send a SOL transfer (lamports) to any address.

SOL transfer form filled

SOL transfer success

Connectors are the same Wallet Standard set (Phantom/Solflare/Backpack/auto-discovery); once connected, SOL transfers use the connected signer.

5. Page

app/page.tsx renders the wallet connect and SOL transfer components (no Suspense needed):

6. Run the Application

Terminal

$ npm run dev

Open http://localhost:3000, connect a Devnet wallet, and send a SOL transfer.

1. Create Solana Provider

app/providers.tsx uses the simplified SolanaProvider props. Set the cluster (Devnet by default).

2. Update Layout

Wrap your application with the Providers component. Update app/layout.tsx to import and use it:

This wraps the entire app with the Solana context so all child components can access wallet state and hooks.

3. Wallet Connect Button

Dropdown to connect/disconnect Wallet Standard wallets via useConnectWallet / useDisconnectWallet.

Wallet dropdown options

Wallet dropdown connected

4. SOL Transfer

Use useSolTransfer to send a SOL transfer (lamports) to any address.

SOL transfer form filled

SOL transfer success

Connectors are the same Wallet Standard set (Phantom/Solflare/Backpack/auto-discovery); once connected, SOL transfers use the connected signer.

5. Page

app/page.tsx renders the wallet connect and SOL transfer components (no Suspense needed):

6. Run the Application

Terminal

$ npm run dev

Open http://localhost:3000, connect a Devnet wallet, and send a SOL transfer.

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

Resources

Prerequisites

Create Next.js Project

Install Solana dependencies

1. Create Solana Provider

2. Update Layout

3. Wallet Connect Button

4. SOL Transfer

5. Page

6. Run the Application

1. Create Solana Provider

2. Update Layout

3. Wallet Connect Button

4. SOL Transfer

5. Page

6. Run the Application

目次