Integración de billetera Solana con Next.js y @solana/kit

Configura una integración mínima de billetera Solana en Next.js (App Router) con @solana/kit, los plugins de kit y @solana/react. Crearás un menú desplegable para conectar la billetera y un componente de transferencia de SOL.

Next.js Kit 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).

Dos ajustes al scaffold

La salida predeterminada de create-next-app necesita dos pequeños cambios para este tutorial:

En tsconfig.json, establece "target": "ES2020" (o posterior). Los montos de transferencia usan literales bigint como 1_000_000_000n, que requieren ES2020.
En app/globals.css, elimina el bloque @media (prefers-color-scheme: dark) generado y la regla de fondo de body. Esta UI es solo para modo claro; los valores predeterminados oscuros de lo contrario anulan la utilidad bg-white y hacen que la página sea ilegible en modo oscuro.

Instalar dependencias de Solana

Terminal

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

Este tutorial está orientado a Kit 7+, los paquetes @solana/kit-plugin-* en 0.13+ (0.14+ para @solana/kit-plugin-wallet) y @solana/react 7+.

1. Crear el proveedor de Solana

app/providers.tsx crea un cliente en el ámbito del módulo y lo publica con ClientProvider. El plugin walletSigner convierte la billetera conectada en el pagador de comisiones y la identidad; exporta el tipo de cliente para que los componentes puedan tipar useClient.

2. Actualizar el 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 cliente y a los hooks de billetera.

3. Botón de conexión de billetera

Menú desplegable para conectar/desconectar billeteras Wallet Standard. useWallets devuelve las billeteras detectadas en el navegador; useConnect / useDisconnect devuelven un ActionResult — este componente utiliza sus campos dispatch, isRunning y error. Cada hook de billetera recibe el cliente como primer argumento, por lo que debes obtenerlo primero con useClient<AppClient>().

Opciones del menú desplegable de billetera

Billetera conectada en el menú desplegable

4. Transferencia de SOL

Construye una instrucción de transferencia con @solana-program/system y envíala a través de client.sendTransaction. La billetera conectada firma y paga.

Formulario de transferencia de SOL completado

Transferencia de SOL exitosa

Las billeteras provienen de la detección de Wallet Standard; una vez conectadas, la transferencia de SOL utiliza el firmante conectado como pagador de comisiones.

5. Página

app/page.tsx renderiza los componentes de conexión de billetera y transferencia de SOL:

6. Ejecutar la aplicación

Terminal

$ npm run dev

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

1. Crear el proveedor de Solana

2. Actualizar el 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 cliente y a los hooks de billetera.

3. Botón de conexión de billetera

Opciones del menú desplegable de billetera

Billetera conectada en el menú desplegable

4. Transferencia de SOL

Construye una instrucción de transferencia con @solana-program/system y envíala a través de client.sendTransaction. La billetera conectada firma y paga.

Formulario de transferencia de SOL completado

Transferencia de SOL exitosa

Las billeteras provienen de la detección de Wallet Standard; una vez conectadas, la transferencia de SOL utiliza el firmante conectado como pagador de comisiones.

5. Página

app/page.tsx renderiza los componentes de conexión de billetera y transferencia de SOL:

6. Ejecutar la aplicación

Terminal

$ npm run dev

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

Recursos

Requisitos previos

Crear proyecto Next.js

Instalar dependencias de Solana

1. Crear el proveedor de Solana

2. Actualizar el layout

3. Botón de conexión de billetera

4. Transferencia de SOL

5. Página

6. Ejecutar la aplicación

1. Crear el proveedor de Solana

2. Actualizar el layout

3. Botón de conexión de billetera

4. Transferencia de SOL

5. Página

6. Ejecutar la aplicación

Tabla de Contenidos