Integracja portfela Solana z Next.js i @solana/kit

Skonfiguruj minimalną integrację portfela Solana w Next.js (App Router) z @solana/kit, wtyczkami kit i @solana/react. Stworzysz rozwijane menu do podłączenia portfela oraz komponent do transferu SOL.

Next.js Kit App

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ę monit, zaakceptuj wszystkie wartości domyślne (starter zawiera Tailwind, który jest używany w tym samouczku do prostych stylów narzędziowych).

Dwie poprawki szablonu

Domyślny wynik create-next-app wymaga dwóch niewielkich zmian na potrzeby tego samouczka:

W tsconfig.json ustaw "target": "ES2020" (lub nowszy). Kwoty transferów używają literałów bigint, takich jak 1_000_000_000n, które wymagają ES2020.
W app/globals.css usuń wygenerowany blok @media (prefers-color-scheme: dark) oraz regułę tła body. Ten interfejs jest tylko jasny; ciemne wartości domyślne w przeciwnym razie nadpisują klasę narzędziową bg-white i sprawiają, że strona jest nieczytelna w trybie ciemnym.

Zainstaluj zależności Solana

Terminal

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

Ten samouczek jest przeznaczony dla Kit 7+, pakietów @solana/kit-plugin-* w wersji 0.13+ (0.14+ dla @solana/kit-plugin-wallet) oraz @solana/react 7+.

1. Utwórz Solana Provider

app/providers.tsx tworzy jednego klienta w zakresie modułu i udostępnia go za pomocą ClientProvider. Wtyczka walletSigner ustawia podłączony portfel jako płatnika opłat i tożsamość; wyeksportuj typ klienta, aby komponenty mogły typować useClient.

2. Zaktualizuj Layout

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

To opakowuje całą aplikację kontekstem Solana, dzięki czemu wszystkie komponenty potomne mogą uzyskać dostęp do klienta i hooków portfela.

3. Przycisk Połączenia Portfela

Menu rozwijane do łączenia/rozłączania portfeli zgodnych z Wallet Standard. useWallets zwraca portfele wykryte w przeglądarce; useConnect / useDisconnect zwracają ActionResult — ten komponent używa jego pól dispatch, isRunning i error. Każdy hook portfela przyjmuje klienta jako pierwszy argument, więc najpierw pobierz go z useClient<AppClient>().

Opcje menu rozwijanego portfela

Połączony portfel w menu rozwijanym

4. Transfer SOL

Zbuduj instrukcję transferu za pomocą @solana-program/system i wyślij ją przez client.sendTransaction. Podłączony portfel podpisuje i płaci.

Wypełniony formularz transferu SOL

Pomyślny transfer SOL

Portfele są wykrywane przez Wallet Standard; po połączeniu transfer SOL używa połączonego sygnatariusza jako płatnika opłat.

5. Strona

app/page.tsx renderuje komponenty połączenia portfela i transferu SOL:

6. Uruchom Aplikację

Terminal

$ npm run dev

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

1. Utwórz Solana Provider

2. Zaktualizuj Layout

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

To opakowuje całą aplikację kontekstem Solana, dzięki czemu wszystkie komponenty potomne mogą uzyskać dostęp do klienta i hooków portfela.

3. Przycisk Połączenia Portfela

Opcje menu rozwijanego portfela

Połączony portfel w menu rozwijanym

4. Transfer SOL

Zbuduj instrukcję transferu za pomocą @solana-program/system i wyślij ją przez client.sendTransaction. Podłączony portfel podpisuje i płaci.

Wypełniony formularz transferu SOL

Pomyślny transfer SOL

Portfele są wykrywane przez Wallet Standard; po połączeniu transfer SOL używa połączonego sygnatariusza jako płatnika opłat.

5. Strona

app/page.tsx renderuje komponenty połączenia portfela i transferu SOL:

6. Uruchom Aplikację

Terminal

$ npm run dev

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

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>;
}

Next.js + Kit

Zasoby

Wymagania wstępne

Utwórz projekt Next.js

Zainstaluj zależności Solana

1. Utwórz Solana Provider

2. Zaktualizuj Layout

3. Przycisk Połączenia Portfela

4. Transfer SOL

5. Strona

6. Uruchom Aplikację

1. Utwórz Solana Provider

2. Zaktualizuj Layout

3. Przycisk Połączenia Portfela

4. Transfer SOL

5. Strona

6. Uruchom Aplikację

Spis treści