Integracja portfela Solana z Next.js i @solana/react-hooks

Skonfiguruj minimalistyczną integrację portfela Solana w Next.js (App Router) z @solana/client i @solana/react-hooks. Stworzysz rozwijane menu do połączenia portfela oraz komponent do transferu SOL.

Aplikacja Next.js Hooks

Zasoby

Wymagania wstępne

Node 20+
npm

Utwórz projekt Next.js

Terminal

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

Gdy pojawi się pytanie, zaakceptuj wszystkie domyślne opcje (starter zawiera Tailwind, którego ten tutorial używa do prostych styli narzędziowych).

Zainstaluj zależności Solana

Terminal

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

Użyj @latest, aby być na bieżąco. Jeśli Twój menedżer pakietów wyświetla ostrzeżenia o zależnościach, możesz przypiąć aktualnie przetestowany zestaw (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) i zaktualizować go, gdy pojawią się nowe wersje.

1. Utwórz Solana Provider

app/providers.tsx używa uproszczonych propsów SolanaProvider. Ustaw klaster (domyślnie Devnet).

2. Zaktualizuj układ

Otocz swoją aplikację komponentem Providers. Zaktualizuj app/layout.tsx, aby zaimportować i użyć tego komponentu:

To otacza całą aplikację kontekstem Solana, dzięki czemu wszystkie komponenty potomne mają dostęp do stanu portfela i hooków.

3. Przycisk połączenia portfela

Rozwijane menu do połączenia/odłączenia portfeli Wallet Standard przez useConnectWallet / useDisconnectWallet.

Opcje rozwijanego portfela

Portfel połączony - rozwijane opcje

4. Przelew SOL

Użyj useSolTransfer, aby wysłać przelew SOL (lamports) na dowolny adres.

Wypełniony formularz przelewu SOL

Sukces przelewu SOL

Konektory to ten sam zestaw Wallet Standard (Phantom/Solflare/Backpack/auto-discovery); po połączeniu przelewy SOL używają połączonego podpisującego.

5. Strona

app/page.tsx renderuje komponenty połączenia z portfelem i przelewu SOL (nie jest wymagany Suspense):

6. Uruchom aplikację

Terminal

$ npm run dev

Otwórz http://localhost:3000, połącz portfel Devnet i wyślij przelew SOL.

1. Utwórz Solana Provider

app/providers.tsx używa uproszczonych propsów SolanaProvider. Ustaw klaster (domyślnie Devnet).

2. Zaktualizuj układ

Otocz swoją aplikację komponentem Providers. Zaktualizuj app/layout.tsx, aby zaimportować i użyć tego komponentu:

To otacza całą aplikację kontekstem Solana, dzięki czemu wszystkie komponenty potomne mają dostęp do stanu portfela i hooków.

3. Przycisk połączenia portfela

Rozwijane menu do połączenia/odłączenia portfeli Wallet Standard przez useConnectWallet / useDisconnectWallet.

Opcje rozwijanego portfela

Portfel połączony - rozwijane opcje

4. Przelew SOL

Użyj useSolTransfer, aby wysłać przelew SOL (lamports) na dowolny adres.

Wypełniony formularz przelewu SOL

Sukces przelewu SOL

Konektory to ten sam zestaw Wallet Standard (Phantom/Solflare/Backpack/auto-discovery); po połączeniu przelewy SOL używają połączonego podpisującego.

5. Strona

app/page.tsx renderuje komponenty połączenia z portfelem i przelewu SOL (nie jest wymagany Suspense):

6. Uruchom aplikację

Terminal

$ npm run dev

Otwórz http://localhost:3000, połącz portfel Devnet i wyślij przelew SOL.

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

Zasoby

Wymagania wstępne

Utwórz projekt Next.js

Zainstaluj zależności Solana

1. Utwórz Solana Provider

2. Zaktualizuj układ

3. Przycisk połączenia portfela

4. Przelew SOL

5. Strona

6. Uruchom aplikację

1. Utwórz Solana Provider

2. Zaktualizuj układ

3. Przycisk połączenia portfela

4. Przelew SOL

5. Strona

6. Uruchom aplikację

Spis treści