Integración de wallet de Solana con Next.js y @solana/react-hooks

Configura una integración mínima de wallet de Solana en Next.js (App Router) con @solana/client y @solana/react-hooks. Crearás un menú desplegable para conectar wallet y un componente de transferencia de SOL.

Next.js Hooks App

Recursos

Requisitos previos

Node 20+
npm

Crear proyecto Next.js

Terminal

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

Cuando se te solicite, acepta todos los valores predeterminados (el starter incluye Tailwind, que este tutorial utiliza para estilos de utilidad simples).

Instalar dependencias de Solana

Terminal

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

Usa @latest para mantenerte actualizado. Si tu gestor de paquetes muestra advertencias de dependencias peer, puedes fijar el conjunto probado actual (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) y actualizar cuando lleguen nuevas versiones.

1. Crear proveedor de Solana

app/providers.tsx utiliza las props simplificadas de SolanaProvider. Configura el clúster (Devnet por defecto).

2. Actualizar layout

Envuelve tu aplicación con el componente Providers. Actualiza app/layout.tsx para importarlo y usarlo:

Esto envuelve toda la aplicación con el contexto de Solana para que todos los componentes hijos puedan acceder al estado de la wallet y a los hooks.

3. Botón de conexión de wallet

Menú desplegable para conectar/desconectar wallets de Wallet Standard mediante useConnectWallet / useDisconnectWallet.

Opciones desplegables de la billetera

Billetera desplegable conectada

4. Transferencia de SOL

Usa useSolTransfer para enviar una transferencia de SOL (lamports) a cualquier dirección.

Formulario de transferencia de SOL completado

Transferencia de SOL exitosa

Los conectores son el mismo conjunto de Wallet Standard (Phantom/Solflare/Backpack/descubrimiento automático); una vez conectados, las transferencias de SOL usan el firmante conectado.

5. Página

app/page.tsx renderiza los componentes de conexión de billetera y transferencia de SOL (no se necesita Suspense):

6. Ejecutar la aplicación

Terminal

$ npm run dev

Abre http://localhost:3000, conecta una billetera de Devnet y envía una transferencia de SOL.

1. Crear proveedor de Solana

app/providers.tsx utiliza las props simplificadas de SolanaProvider. Configura el clúster (Devnet por defecto).

2. Actualizar layout

Envuelve tu aplicación con el componente Providers. Actualiza app/layout.tsx para importarlo y usarlo:

Esto envuelve toda la aplicación con el contexto de Solana para que todos los componentes hijos puedan acceder al estado de la wallet y a los hooks.

3. Botón de conexión de wallet

Menú desplegable para conectar/desconectar wallets de Wallet Standard mediante useConnectWallet / useDisconnectWallet.

Opciones desplegables de la billetera

Billetera desplegable conectada

4. Transferencia de SOL

Usa useSolTransfer para enviar una transferencia de SOL (lamports) a cualquier dirección.

Formulario de transferencia de SOL completado

Transferencia de SOL exitosa

Los conectores son el mismo conjunto de Wallet Standard (Phantom/Solflare/Backpack/descubrimiento automático); una vez conectados, las transferencias de SOL usan el firmante conectado.

5. Página

app/page.tsx renderiza los componentes de conexión de billetera y transferencia de SOL (no se necesita Suspense):

6. Ejecutar la aplicación

Terminal

$ npm run dev

Abre http://localhost:3000, conecta una billetera de Devnet y envía una transferencia 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

Recursos

Requisitos previos

Crear proyecto Next.js

Instalar dependencias de Solana

1. Crear proveedor de Solana

2. Actualizar layout

3. Botón de conexión de wallet

4. Transferencia de SOL

5. Página

6. Ejecutar la aplicación

1. Crear proveedor de Solana

2. Actualizar layout

3. Botón de conexión de wallet

4. Transferencia de SOL

5. Página

6. Ejecutar la aplicación

Tabla de Contenidos