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

Next.js (App Router) içinde @solana/kit, kit eklentileri ve @solana/react ile minimal bir Solana cüzdan entegrasyonu kurun. Bir cüzdan bağlama açılır menüsü ve 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ıç paketi, bu eğitimin basit yardımcı stiller için kullandığı Tailwind'i içerir).

İki yapı iskeleti ayarlaması

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

tsconfig.json içinde "target": "ES2020" veya daha yenisini ayarlayın. Transfer miktarları bigint değişmezlerini (örneğin 1_000_000_000n) kullanır; bu ES2020 gerektirir.
app/globals.css içinde 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 göredir; aksi takdirde karanlık mod varsayılanları bg-white yardımcı programını geçersiz kılar ve sayfayı karanlık modda okunamaz hale getirir.

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

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 ve @solana/react 7+ sürümünü hedeflemektedir. Paket yöneticiniz eski bir Kit eş aralığı tanımlayan @solana-program/* paketinden eş bağımlılık uyarıları gösterirse bunu geçersiz kılın — paketler Kit 7 ile uyumlu çalışır.

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 yazabilmesi için istemci türünü dışa aktarın.

2. Düzeni Güncelleyin

Uygulamanızı Providers bileşeniyle sarın. app/layout.tsx dosyasını içe aktarıp kullanacak şekilde güncelleyin:

Bu, tüm alt bileşenlerin istemciye ve cüzdan kancalarına erişebilmesi için uygulamanın tamamını Solana bağlamıyla sarar.

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 bulunan 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.

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 client.sendTransaction aracılığıyla gönderin. Bağlı cüzdan imzalar ve ücreti öder.

SOL transfer formu dolduruldu

SOL transferi başarılı

Cüzdanlar, Wallet Standard keşfi yoluyla gelir; bağlandıktan sonra, SOL transferi bağlı imzalayıcıyı ücret ödeyen olarak kullanır.

5. Sayfa

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

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. Düzeni Güncelleyin

Uygulamanızı Providers bileşeniyle sarın. app/layout.tsx dosyasını içe aktarıp kullanacak şekilde güncelleyin:

Bu, tüm alt bileşenlerin istemciye ve cüzdan kancalarına erişebilmesi için uygulamanın tamamını Solana bağlamıyla sarar.

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 client.sendTransaction aracılığıyla gönderin. Bağlı cüzdan imzalar ve ücreti öder.

SOL transfer formu dolduruldu

SOL transferi başarılı

Cüzdanlar, Wallet Standard keşfi yoluyla gelir; bağlandıktan sonra, SOL transferi bağlı imzalayıcıyı ücret ödeyen olarak kullanır.

5. Sayfa

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

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ükleyin

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

2. Düzeni 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. Düzeni Güncelleyin

3. Cüzdan Bağlantı Butonu

4. SOL Transferi

5. Sayfa

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

İçindekiler