Next.js ve @solana/react-hooks ile Solana cüzdan entegrasyonu

Next.js'te (App Router) @solana/client ve @solana/react-hooks ile minimal bir Solana cüzdan entegrasyonu kurun. Bir cüzdan bağlantı açılır menüsü ve bir SOL transfer bileşeni oluşturacaksınız.

Next.js Hooks Uygulaması

Next.js projesi oluşturma

Terminal

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

İstendiğinde, tüm varsayılanları kabul edin (başlangıç paketi, bu eğitimin basit yardımcı stiller için kullandığı Tailwind'i içerir).

Solana bağımlılıklarını yükleme

Terminal

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

Güncel kalmak için @latest kullanın. Paket yöneticiniz eş uyarıları gösterirse, mevcut test edilmiş sete (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) sabitleyebilir ve yeni sürümler yayınlandığında yükseltebilirsiniz.

1. Solana sağlayıcısı oluşturma

app/providers.tsx, basitleştirilmiş SolanaProvider özelliklerini kullanır. Kümeyi ayarlayın (varsayılan olarak Devnet).

2. Düzeni güncelleme

Uygulamanızı Providers bileşeni ile sarın. app/layout.tsx dosyasını içe aktarıp kullanmak için güncelleyin:

Bu, tüm uygulamayı Solana bağlamıyla sarar, böylece tüm alt bileşenler cüzdan durumuna ve hook'lara erişebilir.

3. Cüzdan bağlantı düğmesi

useConnectWallet / useDisconnectWallet aracılığıyla Wallet Standard cüzdanlarını bağlamak/bağlantıyı kesmek için açılır menü.

Cüzdan açılır menü seçenekleri

Cüzdan açılır menü bağlı

4. SOL transferi

Herhangi bir adrese SOL transferi (lamport) göndermek için useSolTransfer kullanın.

SOL transfer formu doldurulmuş

SOL transfer başarılı

Bağlayıcılar aynı Wallet Standard setidir (Phantom/Solflare/Backpack/otomatik keşif); bağlandıktan sonra SOL transferleri bağlı imzalayıcıyı kullanır.

5. Sayfa

app/page.tsx cüzdan bağlantısı ve SOL transfer bileşenlerini render eder (Suspense gerekmez):

6. Uygulamayı çalıştırın

Terminal

$ npm run dev

http://localhost:3000 adresini açın, bir Devnet cüzdanı bağlayın ve SOL transferi gönderin.

1. Solana sağlayıcısı oluşturma

app/providers.tsx, basitleştirilmiş SolanaProvider özelliklerini kullanır. Kümeyi ayarlayın (varsayılan olarak Devnet).

2. Düzeni güncelleme

Uygulamanızı Providers bileşeni ile sarın. app/layout.tsx dosyasını içe aktarıp kullanmak için güncelleyin:

Bu, tüm uygulamayı Solana bağlamıyla sarar, böylece tüm alt bileşenler cüzdan durumuna ve hook'lara erişebilir.

3. Cüzdan bağlantı düğmesi

useConnectWallet / useDisconnectWallet aracılığıyla Wallet Standard cüzdanlarını bağlamak/bağlantıyı kesmek için açılır menü.

Cüzdan açılır menü seçenekleri

Cüzdan açılır menü bağlı

4. SOL transferi

Herhangi bir adrese SOL transferi (lamport) göndermek için useSolTransfer kullanın.

SOL transfer formu doldurulmuş

SOL transfer başarılı

Bağlayıcılar aynı Wallet Standard setidir (Phantom/Solflare/Backpack/otomatik keşif); bağlandıktan sonra SOL transferleri bağlı imzalayıcıyı kullanır.

5. Sayfa

app/page.tsx cüzdan bağlantısı ve SOL transfer bileşenlerini render eder (Suspense gerekmez):

6. Uygulamayı çalıştırın

Terminal

$ npm run dev

http://localhost:3000 adresini açın, bir Devnet cüzdanı bağlayın ve SOL transferi gönderin.

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

Kaynaklar

Ön koşullar

Next.js projesi oluşturma

Solana bağımlılıklarını yükleme

1. Solana sağlayıcısı oluşturma

2. Düzeni güncelleme

3. Cüzdan bağlantı düğmesi

4. SOL transferi

5. Sayfa

6. Uygulamayı çalıştırın

1. Solana sağlayıcısı oluşturma

2. Düzeni güncelleme

3. Cüzdan bağlantı düğmesi

4. SOL transferi

5. Sayfa

6. Uygulamayı çalıştırın

İçindekiler