Next.js ve @solana/kit ile Solana cüzdan entegrasyonu

@solana/kit, kit eklentileri ve @solana/react ile Next.js (App Router) üzerinde 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 Kit Uygulaması

Kaynaklar

Ön Koşullar

Node 20+
npm

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ıç şablonu, bu eğitimin basit yardımcı stiller için kullandığı Tailwind'i içerir).

İki yapı iskeleti düzenlemesi

Varsayılan create-next-app çıktısı bu eğitim için iki küçük değişiklik gerektiriyor:

tsconfig.json dosyasında "target": "ES2020" (veya daha yenisi) olarak ayarlayın. Transfer miktarları ES2020 gerektiren 1_000_000_000n gibi bigint değişmezleri kullanır.
app/globals.css dosyasında oluşturulan @media (prefers-color-scheme: dark) bloğunu ve body arka plan kuralını kaldırın. Bu arayüz yalnızca açık temaya yöneliktir; aksi takdirde koyu tema varsayılanları bg-white yardımcı sınıfını geçersiz kılar ve sayfayı koyu modda okunamaz hale getirir.

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

Terminal

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

Bu eğitim, Kit 7+, 0.13+ sürümündeki @solana/kit-plugin-* paketleri (@solana/kit-plugin-wallet için 0.14+) ve @solana/react 7+ sürümünü hedeflemektedir.

1. Solana Sağlayıcısı Oluşturun

app/providers.tsx, modül kapsamında tek bir istemci oluşturur ve bunu ClientProvider ile yayınlar. walletSigner eklentisi, bağlı cüzdanı ücret ödeyici ve kimlik olarak ayarlar; bileşenlerin useClient için tip belirtebilmesi amacıyla istemci türünü dışa aktarın.

2. Layout'u Güncelleyin

Uygulamanızı Providers bileşeniyle sarmalayı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 istemciye ve cüzdan kancalarına erişebilir.

3. Cüzdan Bağlantı Butonu

Wallet Standard cüzdanlarını bağlamak/bağlantıyı kesmek için açılır menü. useWallets, tarayıcıda keşfedilen cüzdanları döndürür; useConnect / useDisconnect bir ActionResult döndürür — bu bileşen onun dispatch, isRunning ve error alanlarını kullanır. Her cüzdan kancası ilk argüman olarak istemciyi alır, bu nedenle önce useClient<AppClient>() ile alın.

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

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

4. SOL Transferi

@solana-program/system ile bir transfer talimatı oluşturun ve bunu client.sendTransaction aracılığıyla gönderin. Bağlı cüzdan imzalar ve ödemeyi gerçekleştirir.

SOL transfer formu dolduruldu

SOL transfer başarılı

Cüzdanlar Wallet Standard keşfi aracılığıyla gelir; bağlandıktan sonra SOL transferinde bağlı imzalayıcı ücret ödeyici olarak kullanılır.

5. Sayfa

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

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şturun

2. Layout'u Güncelleyin

Uygulamanızı Providers bileşeniyle sarmalayı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 istemciye ve cüzdan kancalarına erişebilir.

3. Cüzdan Bağlantı Butonu

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

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

4. SOL Transferi

@solana-program/system ile bir transfer talimatı oluşturun ve bunu client.sendTransaction aracılığıyla gönderin. Bağlı cüzdan imzalar ve ödemeyi gerçekleştirir.

SOL transfer formu dolduruldu

SOL transfer başarılı

Cüzdanlar Wallet Standard keşfi aracılığıyla gelir; bağlandıktan sonra SOL transferinde bağlı imzalayıcı ücret ödeyici olarak kullanılır.

5. Sayfa

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

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 { 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

Kaynaklar

Ön Koşullar

Next.js Projesi Oluşturma

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

1. Solana Sağlayıcısı Oluşturun

2. Layout'u Güncelleyin

3. Cüzdan Bağlantı Butonu

4. SOL Transferi

5. Sayfa

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

1. Solana Sağlayıcısı Oluşturun

2. Layout'u Güncelleyin

3. Cüzdan Bağlantı Butonu

4. SOL Transferi

5. Sayfa

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

İçindekiler