Solana-DokumentationFrontend

Next.js + Kit

Richte eine minimale Solana-Wallet-Integration in Next.js (App Router) mit @solana/kit, den Kit-Plugins und @solana/react ein. Du erstellst ein Dropdown zum Verbinden einer Wallet und eine Komponente für SOL-Überweisungen.

Next.js Kit AppNext.js Kit App

Ressourcen

Voraussetzungen

  • Node 20+
  • npm

Next.js-Projekt erstellen

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

$ 
cd my-app

Akzeptiere bei der Eingabeaufforderung alle Standardeinstellungen (das Starter-Template enthält Tailwind, das in diesem Tutorial für einfache Utility-Styles verwendet wird).

Zwei Anpassungen am Grundgerüst

Die Standardausgabe von create-next-app erfordert zwei kleine Änderungen für dieses Tutorial:

  • In tsconfig.json setze "target": "ES2020" (oder höher). Die Überweisungsbeträge verwenden bigint-Literale wie 1_000_000_000n, die ES2020 voraussetzen.
  • In app/globals.css entferne den generierten @media (prefers-color-scheme: dark)-Block sowie die body-Hintergrundregel. Diese Benutzeroberfläche ist ausschließlich für den Hell-Modus konzipiert; die dunklen Standardwerte überschreiben andernfalls das bg-white-Utility und machen die Seite im Dunkelmodus unlesbar.

Solana-Abhängigkeiten installieren

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

Dieses Tutorial richtet sich an Kit 7+, die @solana/kit-plugin-*-Pakete ab Version 0.13+ (0.14+ für @solana/kit-plugin-wallet) und @solana/react 7+.

1. Solana Provider erstellen

app/providers.tsx erstellt einen Client im Modulscope und veröffentlicht ihn mit ClientProvider. Das walletSigner-Plugin macht die verbundene Wallet zum Fee-Payer und zur Identität; exportiere den Client-Typ, damit Komponenten useClient typisieren können.

2. Layout aktualisieren

Umschließe deine Anwendung mit der Providers-Komponente. Aktualisiere 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 Client und die Wallet-Hooks zugreifen können.

3. Wallet-Connect-Schaltfläche

Dropdown zum Verbinden/Trennen von Wallet Standard-Wallets. useWallets gibt die im Browser erkannten Wallets zurück; useConnect / useDisconnect geben ein ActionResult zurück — diese Komponente verwendet dessen dispatch-, isRunning- und error- Felder. Jeder Wallet-Hook nimmt den Client als erstes Argument, hole ihn daher zuerst über useClient<AppClient>().

Wallet-Dropdown-OptionenWallet-Dropdown-Optionen

Wallet-Dropdown verbundenWallet-Dropdown verbunden

4. SOL-Transfer

Erstelle eine Transfer- Anweisungen mit @solana-program/system und sende sie über client.sendTransaction. Die verbundene Wallet signiert und bezahlt.

SOL-Transferformular ausgefülltSOL-Transferformular ausgefüllt

SOL-Transfer erfolgreichSOL-Transfer erfolgreich

Wallets werden über Wallet Standard Discovery gefunden; sobald verbunden, verwendet der SOL-Transfer den verbundenen Signer als Fee-Payer.

5. Seite

app/page.tsx rendert die Wallet-Connect- und SOL-Transfer-Komponenten:

6. Anwendung starten

Terminal
$ 
npm run dev

Öffne http://localhost:3000, verbinde eine Devnet-Wallet und sende einen SOL-Transfer.

1. Solana Provider erstellen

app/providers.tsx erstellt einen Client im Modulscope und veröffentlicht ihn mit ClientProvider. Das walletSigner-Plugin macht die verbundene Wallet zum Fee-Payer und zur Identität; exportiere den Client-Typ, damit Komponenten useClient typisieren können.

2. Layout aktualisieren

Umschließe deine Anwendung mit der Providers-Komponente. Aktualisiere 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 Client und die Wallet-Hooks zugreifen können.

3. Wallet-Connect-Schaltfläche

Dropdown zum Verbinden/Trennen von Wallet Standard-Wallets. useWallets gibt die im Browser erkannten Wallets zurück; useConnect / useDisconnect geben ein ActionResult zurück — diese Komponente verwendet dessen dispatch-, isRunning- und error- Felder. Jeder Wallet-Hook nimmt den Client als erstes Argument, hole ihn daher zuerst über useClient<AppClient>().

Wallet-Dropdown-OptionenWallet-Dropdown-Optionen

Wallet-Dropdown verbundenWallet-Dropdown verbunden

4. SOL-Transfer

Erstelle eine Transfer- Anweisungen mit @solana-program/system und sende sie über client.sendTransaction. Die verbundene Wallet signiert und bezahlt.

SOL-Transferformular ausgefülltSOL-Transferformular ausgefüllt

SOL-Transfer erfolgreichSOL-Transfer erfolgreich

Wallets werden über Wallet Standard Discovery gefunden; sobald verbunden, verwendet der SOL-Transfer den verbundenen Signer als Fee-Payer.

5. Seite

app/page.tsx rendert die Wallet-Connect- und SOL-Transfer-Komponenten:

6. Anwendung starten

Terminal
$ 
npm run dev

Öffne http://localhost:3000, verbinde eine Devnet-Wallet und sende einen 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>;

}

Is this page helpful?

Vorherige

React

Nächste

Migration zu Kit

Inhaltsverzeichnis

Seite bearbeiten
Solana nutzen
Entwickeln
Unternehmen
Produkte
Ökosystem
KI-Agenten
© 2026 Solana Foundation. Alle Rechte vorbehalten.