Intégration de portefeuille Solana avec Next.js et @solana/react-hooks

Configurez une intégration minimale de portefeuille Solana dans Next.js (App Router) avec @solana/client et @solana/react-hooks. Vous allez créer un menu déroulant de connexion de portefeuille et un composant de transfert SOL.

Application Next.js Hooks

Ressources

Prérequis

Node 20+
npm

Créer un projet Next.js

Terminal

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

Lorsque vous y êtes invité, acceptez toutes les valeurs par défaut (le starter inclut Tailwind, que ce tutoriel utilise pour des styles utilitaires simples).

Installer les dépendances Solana

Terminal

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

Utilisez @latest pour rester à jour. Si votre gestionnaire de paquets affiche des avertissements de pairs, vous pouvez épingler à l'ensemble testé actuel (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) et mettre à niveau lorsque de nouvelles versions sont disponibles.

1. Créer le fournisseur Solana

app/providers.tsx utilise les props simplifiées SolanaProvider. Définissez le cluster (Devnet par défaut).

2. Mettre à jour le layout

Enveloppez votre application avec le composant Providers. Mettez à jour app/layout.tsx pour l'importer et l'utiliser :

Cela enveloppe l'ensemble de l'application avec le contexte Solana afin que tous les composants enfants puissent accéder à l'état du portefeuille et aux hooks.

3. Bouton de connexion du portefeuille

Menu déroulant pour connecter/déconnecter les portefeuilles Wallet Standard via useConnectWallet / useDisconnectWallet.

Options du menu déroulant du portefeuille

Menu déroulant du portefeuille connecté

4. Transfert de SOL

Utilisez useSolTransfer pour envoyer un transfert de SOL (lamports) vers n'importe quelle adresse.

Formulaire de transfert de SOL rempli

Succès du transfert de SOL

Les connecteurs sont le même ensemble Wallet Standard (Phantom/Solflare/Backpack/découverte automatique) ; une fois connecté, les transferts de SOL utilisent le signataire connecté.

5. Page

app/page.tsx affiche les composants de connexion du portefeuille et de transfert de SOL (pas besoin de Suspense) :

6. Exécuter l'application

Terminal

$ npm run dev

Ouvrez http://localhost:3000, connectez un portefeuille Devnet et envoyez un transfert de SOL.

1. Créer le fournisseur Solana

app/providers.tsx utilise les props simplifiées SolanaProvider. Définissez le cluster (Devnet par défaut).

2. Mettre à jour le layout

Enveloppez votre application avec le composant Providers. Mettez à jour app/layout.tsx pour l'importer et l'utiliser :

Cela enveloppe l'ensemble de l'application avec le contexte Solana afin que tous les composants enfants puissent accéder à l'état du portefeuille et aux hooks.

3. Bouton de connexion du portefeuille

Menu déroulant pour connecter/déconnecter les portefeuilles Wallet Standard via useConnectWallet / useDisconnectWallet.

Options du menu déroulant du portefeuille

Menu déroulant du portefeuille connecté

4. Transfert de SOL

Utilisez useSolTransfer pour envoyer un transfert de SOL (lamports) vers n'importe quelle adresse.

Formulaire de transfert de SOL rempli

Succès du transfert de SOL

Les connecteurs sont le même ensemble Wallet Standard (Phantom/Solflare/Backpack/découverte automatique) ; une fois connecté, les transferts de SOL utilisent le signataire connecté.

5. Page

app/page.tsx affiche les composants de connexion du portefeuille et de transfert de SOL (pas besoin de Suspense) :

6. Exécuter l'application

Terminal

$ npm run dev

Ouvrez http://localhost:3000, connectez un portefeuille Devnet et envoyez un transfert de 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

Ressources

Prérequis

Créer un projet Next.js

Installer les dépendances Solana

1. Créer le fournisseur Solana

2. Mettre à jour le layout

3. Bouton de connexion du portefeuille

4. Transfert de SOL

5. Page

6. Exécuter l'application

1. Créer le fournisseur Solana

2. Mettre à jour le layout

3. Bouton de connexion du portefeuille

4. Transfert de SOL

5. Page

6. Exécuter l'application

Table des matières