Solana-lompakon integrointi Next.js:n ja @solana/react-hooksin kanssa

Määritä minimaalinen Solana-lompakon integrointi Next.js:ssä (App Router) käyttäen @solana/client ja @solana/react-hooks. Luot lompakon yhdistämisen pudotusvalikon ja SOL-siirtokomponentin.

Next.js Hooks App

Luo Next.js-projekti

Terminal

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

Kun sinulta kysytään, hyväksy kaikki oletusasetukset (aloituspaketti sisältää Tailwindin, jota tämä opas käyttää yksinkertaisiin apuluokkiin).

Asenna Solana-riippuvuudet

Terminal

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

Käytä @latest pysyäksesi ajan tasalla. Jos paketinhallintasi näyttää vertaisvaroituksia, voit kiinnittää nykyiseen testattuun versioon (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) ja päivittää kun uusia julkaisuja tulee.

1. Luo Solana Provider

app/providers.tsx käyttää yksinkertaistettuja SolanaProvider -propseja. Aseta klusteri (Devnet oletuksena).

2. Päivitä layout

Kääri sovelluksesi Providers -komponentilla. Päivitä app/layout.tsx tuomalla ja käyttämällä sitä:

Tämä käärii koko sovelluksen Solana-kontekstiin, jotta kaikki alikomponentit voivat käyttää lompakon tilaa ja hookeja.

3. Lompakon yhdistämispainike

Pudotusvalikko Wallet Standard -lompakoiden yhdistämiseen/katkaisemiseen käyttäen useConnectWallet / useDisconnectWallet.

Lompakkoalasvalikko vaihtoehdot

Lompakkoalasvalikko yhdistetty

4. SOL-siirto

Käytä useSolTransfer lähettääksesi SOL-siirron (lamportit) mihin tahansa osoitteeseen.

SOL-siirtolomake täytettynä

SOL-siirto onnistui

Liittimet ovat sama Wallet Standard -joukko (Phantom/Solflare/Backpack/automaattinen löytäminen); yhdistämisen jälkeen SOL-siirrot käyttävät yhdistettyä allekirjoittajaa.

5. Sivu

app/page.tsx renderöi lompakon yhdistämis- ja SOL-siirtokomponentit (ei Suspense-tarvetta):

6. Suorita sovellus

Terminal

$ npm run dev

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

1. Luo Solana Provider

app/providers.tsx käyttää yksinkertaistettuja SolanaProvider -propseja. Aseta klusteri (Devnet oletuksena).

2. Päivitä layout

Kääri sovelluksesi Providers -komponentilla. Päivitä app/layout.tsx tuomalla ja käyttämällä sitä:

Tämä käärii koko sovelluksen Solana-kontekstiin, jotta kaikki alikomponentit voivat käyttää lompakon tilaa ja hookeja.

3. Lompakon yhdistämispainike

Pudotusvalikko Wallet Standard -lompakoiden yhdistämiseen/katkaisemiseen käyttäen useConnectWallet / useDisconnectWallet.

Lompakkoalasvalikko vaihtoehdot

Lompakkoalasvalikko yhdistetty

4. SOL-siirto

Käytä useSolTransfer lähettääksesi SOL-siirron (lamportit) mihin tahansa osoitteeseen.

SOL-siirtolomake täytettynä

SOL-siirto onnistui

Liittimet ovat sama Wallet Standard -joukko (Phantom/Solflare/Backpack/automaattinen löytäminen); yhdistämisen jälkeen SOL-siirrot käyttävät yhdistettyä allekirjoittajaa.

5. Sivu

app/page.tsx renderöi lompakon yhdistämis- ja SOL-siirtokomponentit (ei Suspense-tarvetta):

6. Suorita sovellus

Terminal

$ npm run dev

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

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

Resurssit

Edellytykset

Luo Next.js-projekti

Asenna Solana-riippuvuudet

1. Luo Solana Provider

2. Päivitä layout

3. Lompakon yhdistämispainike

4. SOL-siirto

5. Sivu

6. Suorita sovellus

1. Luo Solana Provider

2. Päivitä layout

3. Lompakon yhdistämispainike

4. SOL-siirto

5. Sivu

6. Suorita sovellus

Sisällysluettelo