وثائق سولاناالواجهة الأمامية

Next.js + 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 AppNext.js Hooks App

Resources

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).

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 optionsWallet dropdown options

Wallet dropdown connectedWallet dropdown connected

4. SOL Transfer

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

SOL transfer form filledSOL transfer form filled

SOL transfer successSOL 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 optionsWallet dropdown options

Wallet dropdown connectedWallet dropdown connected

4. SOL Transfer

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

SOL transfer form filledSOL transfer form filled

SOL transfer successSOL 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>;

}

Is this page helpful?

السابق

Frontend

التالي

مكتبة Rust للتطوير

جدول المحتويات

تعديل الصفحة

تدار بواسطة

© 2026 مؤسسة سولانا.
جميع الحقوق محفوظة.
سولانا
تواصل معنا
Solana wallet integration with Next.js and @solana/react-hooks | Solana