Ενσωμάτωση πορτοφολιού Solana με Next.js και @solana/react-hooks

Ρυθμίστε μια ελάχιστη ενσωμάτωση πορτοφολιού Solana στο Next.js (App Router) με @solana/client και @solana/react-hooks. Θα δημιουργήσετε ένα αναπτυσσόμενο μενού σύνδεσης πορτοφολιού και ένα στοιχείο μεταφοράς SOL.

Next.js Hooks App

Πόροι

Προαπαιτούμενα

Node 20+
npm

Δημιουργία έργου Next.js

Terminal

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

Όταν σας ζητηθεί, αποδεχτείτε όλες τις προεπιλογές (το starter περιλαμβάνει Tailwind, το οποίο αυτό το σεμινάριο χρησιμοποιεί για απλά στυλ βοηθητικών προγραμμάτων).

Εγκατάσταση εξαρτήσεων Solana

Terminal

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

Χρησιμοποιήστε @latest για να παραμείνετε ενημερωμένοι. Εάν ο διαχειριστής πακέτων σας εμφανίζει προειδοποιήσεις peer, μπορείτε να καρφιτσώσετε στο τρέχον δοκιμασμένο σύνολο (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) και να αναβαθμίσετε όταν κυκλοφορήσουν νέες εκδόσεις.

1. Δημιουργία Solana Provider

app/providers.tsx χρησιμοποιεί τα απλοποιημένα SolanaProvider props. Ορίστε το cluster (Devnet από προεπιλογή).

2. Ενημέρωση Layout

Τυλίξτε την εφαρμογή σας με το στοιχείο Providers. Ενημερώστε το app/layout.tsx για να το εισαγάγετε και να το χρησιμοποιήσετε:

Αυτό τυλίγει ολόκληρη την εφαρμογή με το πλαίσιο Solana, ώστε όλα τα θυγατρικά στοιχεία να μπορούν να έχουν πρόσβαση στην κατάσταση πορτοφολιού και στα hooks.

3. Κουμπί σύνδεσης πορτοφολιού

Αναπτυσσόμενο μενού για σύνδεση/αποσύνδεση πορτοφολιών Wallet Standard μέσω useConnectWallet / useDisconnectWallet.

Επιλογές αναπτυσσόμενου μενού πορτοφολιού

Συνδεδεμένο αναπτυσσόμενο μενού πορτοφολιού

4. Μεταφορά SOL

Χρησιμοποιήστε το useSolTransfer για να στείλετε μια μεταφορά SOL (lamports) σε οποιαδήποτε διεύθυνση.

Συμπληρωμένη φόρμα μεταφοράς SOL

Επιτυχής μεταφορά SOL

Οι συνδέσεις είναι το ίδιο σύνολο Wallet Standard (Phantom/Solflare/Backpack/αυτόματη ανακάλυψη)· μόλις συνδεθείτε, οι μεταφορές SOL χρησιμοποιούν τον συνδεδεμένο υπογράφοντα.

5. Σελίδα

Το app/page.tsx αποδίδει τα στοιχεία σύνδεσης πορτοφολιού και μεταφοράς SOL (δεν χρειάζεται Suspense):

6. Εκτέλεση της εφαρμογής

Terminal

$ npm run dev

Ανοίξτε το http://localhost:3000, συνδέστε ένα πορτοφόλι Devnet και στείλτε μια μεταφορά SOL.

1. Δημιουργία Solana Provider

app/providers.tsx χρησιμοποιεί τα απλοποιημένα SolanaProvider props. Ορίστε το cluster (Devnet από προεπιλογή).

2. Ενημέρωση Layout

3. Κουμπί σύνδεσης πορτοφολιού

Αναπτυσσόμενο μενού για σύνδεση/αποσύνδεση πορτοφολιών Wallet Standard μέσω useConnectWallet / useDisconnectWallet.

Επιλογές αναπτυσσόμενου μενού πορτοφολιού

Συνδεδεμένο αναπτυσσόμενο μενού πορτοφολιού

4. Μεταφορά SOL

Χρησιμοποιήστε το useSolTransfer για να στείλετε μια μεταφορά SOL (lamports) σε οποιαδήποτε διεύθυνση.

Συμπληρωμένη φόρμα μεταφοράς SOL

Επιτυχής μεταφορά SOL

5. Σελίδα

Το app/page.tsx αποδίδει τα στοιχεία σύνδεσης πορτοφολιού και μεταφοράς SOL (δεν χρειάζεται Suspense):

6. Εκτέλεση της εφαρμογής

Terminal

$ npm run dev

Ανοίξτε το http://localhost:3000, συνδέστε ένα πορτοφόλι Devnet και στείλτε μια μεταφορά 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

Πόροι

Προαπαιτούμενα

Δημιουργία έργου Next.js

Εγκατάσταση εξαρτήσεων Solana

1. Δημιουργία Solana Provider

2. Ενημέρωση Layout

3. Κουμπί σύνδεσης πορτοφολιού

4. Μεταφορά SOL

5. Σελίδα

6. Εκτέλεση της εφαρμογής

1. Δημιουργία Solana Provider

2. Ενημέρωση Layout

3. Κουμπί σύνδεσης πορτοφολιού

4. Μεταφορά SOL

5. Σελίδα

6. Εκτέλεση της εφαρμογής

Πίνακας Περιεχομένων