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

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

Next.js Kit App

Πόροι

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

Node 20+
npm

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

Terminal

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

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

Δύο τροποποιήσεις scaffold

Η προεπιλεγμένη έξοδος του create-next-app χρειάζεται δύο μικρές αλλαγές για αυτό το σεμινάριο:

Στο tsconfig.json, ορίστε "target": "ES2020" (ή νεότερο). Τα ποσά μεταφοράς χρησιμοποιούν literals bigint όπως 1_000_000_000n, που απαιτούν ES2020.
Στο app/globals.css, αφαιρέστε το παραγόμενο μπλοκ @media (prefers-color-scheme: dark) και τον κανόνα background του body. Αυτό το UI είναι μόνο για밝ό θέμα· οι σκοτεινές προεπιλογές διαφορετικά παρακάμπτουν το utility bg-white και καθιστούν τη σελίδα μη αναγνώσιμη σε σκοτεινή λειτουργία.

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

Terminal

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

Αυτό το σεμινάριο στοχεύει στο Kit 7+, τα πακέτα @solana/kit-plugin-* στην έκδοση 0.13+ (0.14+ για το @solana/kit-plugin-wallet), και το @solana/react 7+.

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

Το app/providers.tsx δημιουργεί έναν client στο εύρος της ενότητας και τον δημοσιεύει μέσω του ClientProvider. Το plugin walletSigner ορίζει το συνδεδεμένο πορτοφόλι ως υπεύθυνο πληρωμής τελών και ταυτότητας· εξάγετε τον τύπο client ώστε τα components να μπορούν να χρησιμοποιήσουν το useClient.

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

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

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

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

Αναπτυσσόμενο μενού για σύνδεση/αποσύνδεση πορτοφολιών Wallet Standard. Το useWallets επιστρέφει τα πορτοφόλια που εντοπίζονται στο πρόγραμμα περιήγησης· τα useConnect / useDisconnect επιστρέφουν ένα ActionResult — αυτό το component χρησιμοποιεί τα πεδία dispatch, isRunning και error. Κάθε hook πορτοφολιού δέχεται τον client ως πρώτο όρισμα, οπότε αντλήστε τον πρώτα από το useClient<AppClient>().

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

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

4. Μεταφορά SOL

Δημιουργήστε μια εντολή μεταφοράς με το @solana-program/system και στείλτε την μέσω client.sendTransaction. Το συνδεδεμένο πορτοφόλι υπογράφει και πληρώνει.

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

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

Τα πορτοφόλια προέρχονται από την ανακάλυψη Wallet Standard· μόλις συνδεθούν, η μεταφορά SOL χρησιμοποιεί τον συνδεδεμένο υπογράφοντα ως υπεύθυνο πληρωμής τελών.

5. Σελίδα

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

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

Terminal

$ npm run dev

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

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

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

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

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

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

4. Μεταφορά SOL

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

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

5. Σελίδα

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

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

Terminal

$ npm run dev

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

Πόροι

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

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

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

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

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

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

4. Μεταφορά SOL

5. Σελίδα

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

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

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

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

4. Μεταφορά SOL

5. Σελίδα

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

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