Solana wallet integration with Next.js and @solana/kit

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

Next.js Kit 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).

Two scaffold tweaks

The default create-next-app output needs two small changes for this tutorial:

In tsconfig.json, set "target": "ES2020" (or later). The transfer amounts use bigint literals such as 1_000_000_000n, which require ES2020.
In app/globals.css, remove the generated @media (prefers-color-scheme: dark) block and the body background rule. This UI is light-only; the dark defaults otherwise override the bg-white utility and render the page unreadable in dark mode.

Install Solana dependencies

Terminal

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

This tutorial targets Kit 7+, the @solana/kit-plugin-* packages at 0.13+ (0.14+ for @solana/kit-plugin-wallet), and @solana/react 7+.

1. Create Solana Provider

app/providers.tsx builds one client at module scope and publishes it with ClientProvider. The walletSigner plugin makes the connected wallet the fee payer and identity; export the client type so components can type useClient.

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 the client and wallet hooks.

3. Wallet Connect Button

Dropdown to connect/disconnect Wallet Standard wallets. useWallets returns the wallets discovered in the browser; useConnect / useDisconnect return an ActionResult — this component uses its dispatch, isRunning, and error fields. Every wallet hook takes the client as its first argument, so pull it from useClient<AppClient>() first.

Wallet dropdown options

Wallet dropdown connected

4. SOL Transfer

Build a transfer instruction with @solana-program/system and send it through client.sendTransaction. The connected wallet signs and pays.

SOL transfer form filled

SOL transfer success

Wallets come from Wallet Standard discovery; once connected, the SOL transfer uses the connected signer as the fee payer.

5. Page

app/page.tsx renders the wallet connect and SOL transfer components:

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

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 the client and wallet hooks.

3. Wallet Connect Button

Wallet dropdown options

Wallet dropdown connected

4. SOL Transfer

Build a transfer instruction with @solana-program/system and send it through client.sendTransaction. The connected wallet signs and pays.

SOL transfer form filled

SOL transfer success

Wallets come from Wallet Standard discovery; once connected, the SOL transfer uses the connected signer as the fee payer.

5. Page

app/page.tsx renders the wallet connect and SOL transfer components:

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 { 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

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

Table of Contents