Solana documentatieFrontend

Next.js + Kit

Stel een minimale Solana wallet-integratie in Next.js (App Router) in met @solana/kit, de kit-plugins en @solana/react. Je maakt een dropdown voor het verbinden van een wallet en een SOL-overdrachtcomponent.

Next.js Kit AppNext.js Kit App

Bronnen

Vereisten

  • Node 20+
  • npm

Next.js-project aanmaken

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

$ 
cd my-app

Accepteer bij de prompts alle standaardinstellingen (de starter bevat Tailwind, dat in deze tutorial wordt gebruikt voor eenvoudige utilitystijlen).

Twee aanpassingen aan het basisproject

De standaarduitvoer van create-next-app vereist twee kleine wijzigingen voor deze tutorial:

  • Stel in tsconfig.json "target": "ES2020" in (of hoger). De overdrachtsbedragen gebruiken bigint-literals zoals 1_000_000_000n, waarvoor ES2020 vereist is.
  • Verwijder in app/globals.css het gegenereerde @media (prefers-color-scheme: dark)-blok en de achtergrondregels van body. Deze UI is alleen voor lichte modus; de donkere standaardinstellingen overschrijven anders het hulpprogramma bg-white en maken de pagina onleesbaar in de donkere modus.

Solana-afhankelijkheden installeren

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

Deze tutorial is gericht op Kit 7+, de @solana/kit-plugin-*-pakketten vanaf versie 0.13+ (0.14+ voor @solana/kit-plugin-wallet) en @solana/react 7+.

1. Solana Provider Aanmaken

app/providers.tsx bouwt één client op moduleniveau en publiceert deze via ClientProvider. De walletSigner-plugin maakt de verbonden portemonnee de vergoedingsbetaler en identiteit; exporteer het clienttype zodat componenten useClient kunnen typen.

2. Layout Bijwerken

Omsluit je applicatie met de Providers-component. Werk app/layout.tsx bij om het te importeren en te gebruiken:

Dit omsluit de volledige applicatie met de Solana-context zodat alle onderliggende componenten toegang hebben tot de client en portemonnee-hooks.

3. Portemonnee Verbindingsknop

Dropdown om Wallet Standard-portemonnees te verbinden/verbreken. useWallets geeft de in de browser gevonden portemonnees terug; useConnect / useDisconnect geven een ActionResult terug — deze component gebruikt de velden dispatch, isRunning en error daarvan. Elke portemonnee-hook neemt de client als eerste argument, dus haal deze op via useClient<AppClient>() als eerste stap.

Portemonnee dropdown-optiesPortemonnee dropdown-opties

Portemonnee dropdown verbondenPortemonnee dropdown verbonden

4. SOL Overschrijving

Bouw een overdrachtsinstructie met @solana-program/system en verstuur deze via client.sendTransaction. De verbonden portemonnee ondertekent en betaalt.

SOL overdrachtformulier ingevuldSOL overdrachtformulier ingevuld

SOL overdracht geslaagdSOL overdracht geslaagd

Portemonnees worden gevonden via Wallet Standard-detectie; eenmaal verbonden gebruikt de SOL-overdracht de verbonden ondertekenaar als vergoedingsbetaler.

5. Pagina

app/page.tsx rendert de portemonnee-verbindingsknop en SOL-overdrachtcomponenten:

6. De Applicatie Starten

Terminal
$ 
npm run dev

Open http://localhost:3000, verbind een Devnet-portemonnee en verstuur een SOL-overdracht.

1. Solana Provider Aanmaken

app/providers.tsx bouwt één client op moduleniveau en publiceert deze via ClientProvider. De walletSigner-plugin maakt de verbonden portemonnee de vergoedingsbetaler en identiteit; exporteer het clienttype zodat componenten useClient kunnen typen.

2. Layout Bijwerken

Omsluit je applicatie met de Providers-component. Werk app/layout.tsx bij om het te importeren en te gebruiken:

Dit omsluit de volledige applicatie met de Solana-context zodat alle onderliggende componenten toegang hebben tot de client en portemonnee-hooks.

3. Portemonnee Verbindingsknop

Dropdown om Wallet Standard-portemonnees te verbinden/verbreken. useWallets geeft de in de browser gevonden portemonnees terug; useConnect / useDisconnect geven een ActionResult terug — deze component gebruikt de velden dispatch, isRunning en error daarvan. Elke portemonnee-hook neemt de client als eerste argument, dus haal deze op via useClient<AppClient>() als eerste stap.

Portemonnee dropdown-optiesPortemonnee dropdown-opties

Portemonnee dropdown verbondenPortemonnee dropdown verbonden

4. SOL Overschrijving

Bouw een overdrachtsinstructie met @solana-program/system en verstuur deze via client.sendTransaction. De verbonden portemonnee ondertekent en betaalt.

SOL overdrachtformulier ingevuldSOL overdrachtformulier ingevuld

SOL overdracht geslaagdSOL overdracht geslaagd

Portemonnees worden gevonden via Wallet Standard-detectie; eenmaal verbonden gebruikt de SOL-overdracht de verbonden ondertekenaar als vergoedingsbetaler.

5. Pagina

app/page.tsx rendert de portemonnee-verbindingsknop en SOL-overdrachtcomponenten:

6. De Applicatie Starten

Terminal
$ 
npm run dev

Open http://localhost:3000, verbind een Devnet-portemonnee en verstuur een SOL-overdracht.

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?

Vorige

React

Volgende

Migreren naar Kit

Inhoudsopgave

Pagina Bewerken
Solana gebruiken
Bouwen
Enterprise
Producten
Ecosysteem
AI-agents
© 2026 Solana Foundation. Alle rechten voorbehouden.