Intégration de portefeuille Solana avec Next.js et @solana/kit

Configurez une intégration minimale de portefeuille Solana dans Next.js (App Router) avec @solana/kit, les plugins kit et @solana/react. Vous créerez un menu déroulant de connexion au portefeuille et un composant de transfert de SOL.

Next.js Kit App

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 modèle inclut Tailwind, que ce tutoriel utilise pour des styles utilitaires simples).

Deux ajustements du modèle

La sortie par défaut de create-next-app nécessite deux petites modifications pour ce tutoriel :

Dans tsconfig.json, définissez "target": "ES2020" (ou ultérieur). Les montants de transfert utilisent des littéraux bigint tels que 1_000_000_000n, qui nécessitent ES2020.
Dans app/globals.css, supprimez le bloc @media (prefers-color-scheme: dark) généré ainsi que la règle de fond body. Cette interface est en mode clair uniquement ; les valeurs sombres par défaut remplacent sinon l'utilitaire bg-white et rendent la page illisible en mode sombre.

Installer les dépendances Solana

Terminal

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

Ce tutoriel cible Kit 7+, les packages @solana/kit-plugin-* à partir de la version 0.13+ (0.14+ pour @solana/kit-plugin-wallet), et @solana/react 7+.

1. Créer un fournisseur Solana

app/providers.tsx crée un client unique à la portée du module et le publie avec ClientProvider. Le plugin walletSigner définit le portefeuille connecté comme payeur des frais et identité ; exportez le type du client pour que les composants puissent typer useClient.

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 au client et aux hooks de portefeuille.

3. Bouton de connexion du portefeuille

Menu déroulant pour connecter/déconnecter les portefeuilles Wallet Standard. useWallets retourne les portefeuilles détectés dans le navigateur ; useConnect / useDisconnect retournent un ActionResult — ce composant utilise ses champs dispatch, isRunning et error. Chaque hook de portefeuille prend le client comme premier argument, récupérez-le donc via useClient<AppClient>() en premier.

Options du menu déroulant du portefeuille

Portefeuille connecté dans le menu déroulant

4. Transfert de SOL

Construisez une instruction de transfert avec @solana-program/system et envoyez-la via client.sendTransaction. Le portefeuille connecté signe et paie.

Formulaire de transfert de SOL rempli

Transfert de SOL réussi

Les portefeuilles sont découverts via Wallet Standard ; une fois connecté, le transfert de SOL utilise le signataire connecté comme payeur des frais.

5. Page

app/page.tsx affiche les composants de connexion du portefeuille et de transfert de SOL :

6. Lancer l'application

Terminal

$ npm run dev

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

1. Créer un fournisseur Solana

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 au client et aux hooks de portefeuille.

3. Bouton de connexion du portefeuille

Options du menu déroulant du portefeuille

Portefeuille connecté dans le menu déroulant

4. Transfert de SOL

Construisez une instruction de transfert avec @solana-program/system et envoyez-la via client.sendTransaction. Le portefeuille connecté signe et paie.

Formulaire de transfert de SOL rempli

Transfert de SOL réussi

Les portefeuilles sont découverts via Wallet Standard ; une fois connecté, le transfert de SOL utilise le signataire connecté comme payeur des frais.

5. Page

app/page.tsx affiche les composants de connexion du portefeuille et de transfert de SOL :

6. Lancer 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 { 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

Ressources

Prérequis

Créer un projet Next.js

Installer les dépendances Solana

1. Créer un fournisseur Solana

2. Mettre à jour le Layout

3. Bouton de connexion du portefeuille

4. Transfert de SOL

5. Page

6. Lancer l'application

1. Créer un fournisseur Solana

2. Mettre à jour le Layout

3. Bouton de connexion du portefeuille

4. Transfert de SOL

5. Page

6. Lancer l'application

Table des matières