Solana Wallet-Integration mit Next.js und @solana/react-hooks

Richten Sie eine minimale Solana Wallet-Integration in Next.js (App Router) mit @solana/client und @solana/react-hooks ein. Sie erstellen ein Dropdown-Menü zum Verbinden der Wallet und eine Komponente für SOL-Überweisungen.

Next.js Hooks App

Ressourcen

Voraussetzungen

Node 20+
npm

Next.js-Projekt erstellen

Terminal

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

Wenn Sie dazu aufgefordert werden, akzeptieren Sie alle Standardeinstellungen (der Starter enthält Tailwind, das in diesem Tutorial für einfache Utility-Styles verwendet wird).

Solana-Abhängigkeiten installieren

Terminal

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

Verwenden Sie @latest, um auf dem neuesten Stand zu bleiben. Wenn Ihr Paketmanager Peer-Warnungen anzeigt, können Sie auf das aktuell getestete Set (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) festlegen und aktualisieren, wenn neue Versionen verfügbar sind.

1. Solana Provider erstellen

app/providers.tsx verwendet die vereinfachten SolanaProvider-Props. Legen Sie den Cluster fest (standardmäßig Devnet).

2. Layout aktualisieren

Umschließen Sie Ihre Anwendung mit der Providers-Komponente. Aktualisieren Sie app/layout.tsx, um sie zu importieren und zu verwenden:

Dies umschließt die gesamte App mit dem Solana-Kontext, sodass alle untergeordneten Komponenten auf den Wallet-Status und die Hooks zugreifen können.

3. Wallet Connect Button

Dropdown-Menü zum Verbinden/Trennen von Wallet Standard Wallets über useConnectWallet / useDisconnectWallet.

Wallet-Dropdown-Optionen

Wallet-Dropdown verbunden

4. SOL-Überweisung

Verwenden Sie useSolTransfer, um eine SOL-Überweisung (Lamports) an eine beliebige Adresse zu senden.

SOL-Überweisungsformular ausgefüllt

SOL-Überweisung erfolgreich

Die Connectors sind dieselben wie im Wallet Standard (Phantom/Solflare/Backpack/automatische Erkennung); nach der Verbindung verwenden SOL-Überweisungen den verbundenen Signer.

5. Seite

app/page.tsx rendert die Wallet-Verbindungs- und SOL-Überweisungskomponenten (kein Suspense erforderlich):

6. Anwendung ausführen

Terminal

$ npm run dev

Öffnen Sie http://localhost:3000, verbinden Sie ein Devnet-Wallet und senden Sie eine SOL-Überweisung.

1. Solana Provider erstellen

app/providers.tsx verwendet die vereinfachten SolanaProvider-Props. Legen Sie den Cluster fest (standardmäßig Devnet).

2. Layout aktualisieren

Umschließen Sie Ihre Anwendung mit der Providers-Komponente. Aktualisieren Sie app/layout.tsx, um sie zu importieren und zu verwenden:

Dies umschließt die gesamte App mit dem Solana-Kontext, sodass alle untergeordneten Komponenten auf den Wallet-Status und die Hooks zugreifen können.

3. Wallet Connect Button

Dropdown-Menü zum Verbinden/Trennen von Wallet Standard Wallets über useConnectWallet / useDisconnectWallet.

Wallet-Dropdown-Optionen

Wallet-Dropdown verbunden

4. SOL-Überweisung

Verwenden Sie useSolTransfer, um eine SOL-Überweisung (Lamports) an eine beliebige Adresse zu senden.

SOL-Überweisungsformular ausgefüllt

SOL-Überweisung erfolgreich

Die Connectors sind dieselben wie im Wallet Standard (Phantom/Solflare/Backpack/automatische Erkennung); nach der Verbindung verwenden SOL-Überweisungen den verbundenen Signer.

5. Seite

app/page.tsx rendert die Wallet-Verbindungs- und SOL-Überweisungskomponenten (kein Suspense erforderlich):

6. Anwendung ausführen

Terminal

$ npm run dev

Öffnen Sie http://localhost:3000, verbinden Sie ein Devnet-Wallet und senden Sie eine SOL-Überweisung.

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

Ressourcen

Voraussetzungen

Next.js-Projekt erstellen

Solana-Abhängigkeiten installieren

1. Solana Provider erstellen

2. Layout aktualisieren

3. Wallet Connect Button

4. SOL-Überweisung

5. Seite

6. Anwendung ausführen

1. Solana Provider erstellen

2. Layout aktualisieren

3. Wallet Connect Button

4. SOL-Überweisung

5. Seite

6. Anwendung ausführen

Inhaltsverzeichnis