Solana-dokumentaatioFrontend

Next.js + Kit

Määritä minimaalinen Solana-lompakkointegraatio Next.js:ssä (App Router) käyttäen @solana/kitiä, kit-laajennuksia ja @solana/reactia. Luot yhdistä lompakko -pudotusvalikon ja SOL-siirtokomponentin.

Next.js Kit AppNext.js Kit App

Resurssit

Edellytykset

  • Node 20+
  • npm

Luo Next.js-projekti

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

$ 
cd my-app

Kun sinulta kysytään, hyväksy kaikki oletusasetukset (aloituspohja sisältää Tailwindin, jota tässä oppaassa käytetään yksinkertaisiin apuohjelmatasoihin).

Kaksi rakennepohjan muutosta

Oletusarvoinen create-next-app-tulos vaatii kaksi pientä muutosta tätä opasta varten:

  • Aseta tsconfig.json-tiedostossa "target": "ES2020" (tai uudempi). Siirtosummat käyttävät bigint-literaaleja, kuten 1_000_000_000n, jotka edellyttävät ES2020:aa.
  • Poista app/globals.css-tiedostosta generoitu @media (prefers-color-scheme: dark) -lohko ja body-taustavärisääntö. Tämä käyttöliittymä on vain vaaleataustainen; tumman tilan oletusasetukset muuten ylikirjoittavat bg-white-apuluokan ja tekevät sivun lukukelvottomaksi tummassa tilassa.

Asenna Solana-riippuvuudet

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

Tämä opas kohdistuu Kit 7+:aan, @solana/kit-plugin-*-paketteihin versiosta 0.13+ alkaen (0.14+ @solana/kit-plugin-wallet-paketille) ja @solana/react 7+:aan.

1. Luo Solana-palveluntarjoaja

app/providers.tsx rakentaa yhden asiakkaan moduulitasolla ja julkaisee sen ClientProvider-komponentilla. walletSigner-lisäosa asettaa yhdistetyn lompakon maksajaksi ja identiteetiksi; vie asiakastyyppi, jotta komponentit voivat tyypittää useClient-hookin.

2. Päivitä Layout

Kääri sovelluksesi Providers-komponenttiin. Päivitä app/layout.tsx tuomaan ja käyttämään sitä:

Tämä käärii koko sovelluksen Solana-kontekstiin, jotta kaikki alikomponentit voivat hyödyntää asiakasta ja lompakkohookeja.

3. Lompakonyhdistämispainike

Alasvetovalikko Wallet Standard -lompakoiden yhdistämiseen ja irrottamiseen. useWallets palauttaa selaimessa havaitut lompakot; useConnect / useDisconnect palauttavat ActionResult-objektin — tämä komponentti käyttää sen dispatch-, isRunning- ja error- kenttiä. Jokainen lompakkohook ottaa asiakkaan ensimmäisenä argumenttinaan, joten hae se ensin useClient<AppClient>()-hookilla.

Lompakon alasvetovalikon vaihtoehdotLompakon alasvetovalikon vaihtoehdot

Lompakko yhdistettynä alasvetovalikossaLompakko yhdistettynä alasvetovalikossa

4. SOL-siirto

Rakenna siirto-ohje @solana-program/system-paketilla ja lähetä se client.sendTransaction-metodin kautta. Yhdistetty lompakko allekirjoittaa ja maksaa.

SOL-siirtolomake täytettynäSOL-siirtolomake täytettynä

SOL-siirto onnistuiSOL-siirto onnistui

Lompakot löydetään Wallet Standard -etsinnän kautta; yhdistämisen jälkeen SOL-siirto käyttää yhdistettyä allekirjoittajaa maksajana.

5. Sivu

app/page.tsx renderöi lompakonyhdistämis- ja SOL-siirtokomponentit:

6. Käynnistä sovellus

Terminal
$ 
npm run dev

Avaa http://localhost:3000, yhdistä Devnet-lompakko ja lähetä SOL-siirto.

1. Luo Solana-palveluntarjoaja

app/providers.tsx rakentaa yhden asiakkaan moduulitasolla ja julkaisee sen ClientProvider-komponentilla. walletSigner-lisäosa asettaa yhdistetyn lompakon maksajaksi ja identiteetiksi; vie asiakastyyppi, jotta komponentit voivat tyypittää useClient-hookin.

2. Päivitä Layout

Kääri sovelluksesi Providers-komponenttiin. Päivitä app/layout.tsx tuomaan ja käyttämään sitä:

Tämä käärii koko sovelluksen Solana-kontekstiin, jotta kaikki alikomponentit voivat hyödyntää asiakasta ja lompakkohookeja.

3. Lompakonyhdistämispainike

Alasvetovalikko Wallet Standard -lompakoiden yhdistämiseen ja irrottamiseen. useWallets palauttaa selaimessa havaitut lompakot; useConnect / useDisconnect palauttavat ActionResult-objektin — tämä komponentti käyttää sen dispatch-, isRunning- ja error- kenttiä. Jokainen lompakkohook ottaa asiakkaan ensimmäisenä argumenttinaan, joten hae se ensin useClient<AppClient>()-hookilla.

Lompakon alasvetovalikon vaihtoehdotLompakon alasvetovalikon vaihtoehdot

Lompakko yhdistettynä alasvetovalikossaLompakko yhdistettynä alasvetovalikossa

4. SOL-siirto

Rakenna siirto-ohje @solana-program/system-paketilla ja lähetä se client.sendTransaction-metodin kautta. Yhdistetty lompakko allekirjoittaa ja maksaa.

SOL-siirtolomake täytettynäSOL-siirtolomake täytettynä

SOL-siirto onnistuiSOL-siirto onnistui

Lompakot löydetään Wallet Standard -etsinnän kautta; yhdistämisen jälkeen SOL-siirto käyttää yhdistettyä allekirjoittajaa maksajana.

5. Sivu

app/page.tsx renderöi lompakonyhdistämis- ja SOL-siirtokomponentit:

6. Käynnistä sovellus

Terminal
$ 
npm run dev

Avaa http://localhost:3000, yhdistä Devnet-lompakko ja lähetä SOL-siirto.

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?

Edellinen

React

Seuraava

Siirtyminen Kitiin

Sisällysluettelo

Muokkaa sivua
Käytä Solanaa
Rakenna
Yritykset
Tuotteet
Ekosysteemi
AI-agentit
© 2026 Solana Foundation. Kaikki oikeudet pidätetään.