---
title: Next.js + Kit
seoTitle: Solana wallet integration with Next.js and @solana/kit
description:
Set up Solana wallet integration in Next.js with @solana/kit and @solana/react
to send SOL transfers.
---
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.
## Resources
- [Solana Kit](https://github.com/anza-xyz/kit)
- [Kit plugins](https://github.com/anza-xyz/kit-plugins)
- [Solana JSON RPC](/docs/rpc)
## Prerequisites
- Node 20+
- npm
## 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).
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+.
## !!steps 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`.
```tsx !! title="app/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;
export default function Providers({ children }: { children: React.ReactNode }) {
return {children};
}
```
## !!steps 2. Update Layout
Wrap your application with the `Providers` component. Update `app/layout.tsx` to
import and use it:
```tsx !! title="app/layout.tsx"
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Providers from "./providers";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"]
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"]
});
export const metadata: Metadata = {
title: "Solana App",
description: "Solana wallet integration with Next.js"
};
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
This wraps the entire app with the Solana context so all child components can
access the client and wallet hooks.
## !!steps 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()` first.
```tsx !! title="app/components/wallet-connect-button.tsx"
"use client";
import { useState } from "react";
import {
useConnect,
useConnectedWallet,
useDisconnect,
useWallets,
useWalletStatus
} from "@solana/kit-plugin-wallet/react";
import { useClient } from "@solana/react";
import type { AppClient } from "../providers";
function truncate(address: string) {
return `${address.slice(0, 4)}…${address.slice(-4)}`;
}
export function WalletConnectButton() {
const client = useClient();
const status = useWalletStatus(client);
const wallets = useWallets(client);
const connected = useConnectedWallet(client);
const connect = useConnect(client);
const disconnect = useDisconnect(client);
const [open, setOpen] = useState(false);
const address = connected ? String(connected.account.address) : null;
const error = connect.error ?? disconnect.error;
return (
) : null}
);
}
```
Wallets come from Wallet Standard discovery; once connected, the SOL transfer
uses the connected signer as the fee payer.
## !!steps 5. Page
`app/page.tsx` renders the wallet connect and SOL transfer components:
```tsx !! title="app/page.tsx"
import { SolTransferCard } from "./components/sol-transfer-card";
import { WalletConnectButton } from "./components/wallet-connect-button";
export default function HomePage() {
return (
@solana/kit + Next.js
Solana wallet + SOL transfer
Connect a Wallet Standard wallet and send a SOL transfer using the
connected signer.
Wallet
Pick a Wallet Standard connector.
);
}
```
## !!steps 6. Run the Application
```terminal
$ npm run dev
```
Open http://localhost:3000, connect a Devnet wallet, and send a SOL transfer.