Integração de carteira Solana com Next.js e @solana/react-hooks

Configure uma integração mínima de carteira Solana no Next.js (App Router) com @solana/client e @solana/react-hooks. Você criará um menu suspenso de conexão de carteira e um componente de transferência de SOL.

Aplicação Next.js Hooks

Recursos

Pré-requisitos

Node 20+
npm

Criar projeto Next.js

Terminal

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

Quando solicitado, aceite todas as configurações padrão (o starter inclui Tailwind, que este tutorial usa para estilos utilitários simples).

Instalar dependências Solana

Terminal

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

Use @latest para manter-se atualizado. Se o seu gestor de pacotes apresentar avisos de dependências pares, você pode fixar no conjunto testado atual (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) e atualizar quando novos lançamentos estiverem disponíveis.

1. Criar provedor Solana

app/providers.tsx usa as props simplificadas SolanaProvider. Defina o cluster (Devnet por padrão).

2. Atualizar layout

Envolva a sua aplicação com o componente Providers. Atualize app/layout.tsx para importá-lo e usá-lo:

Isto envolve toda a aplicação com o contexto Solana para que todos os componentes filhos possam aceder ao estado da carteira e aos hooks.

3. Botão de conexão de carteira

Menu suspenso para conectar/desconectar carteiras Wallet Standard via useConnectWallet / useDisconnectWallet.

Opções do menu suspenso da carteira

Menu suspenso da carteira conectada

4. Transferência de SOL

Use useSolTransfer para enviar uma transferência de SOL (lamports) para qualquer endereço.

Formulário de transferência de SOL preenchido

Transferência de SOL bem-sucedida

Os conectores são o mesmo conjunto do Wallet Standard (Phantom/Solflare/Backpack/descoberta automática); uma vez conectados, as transferências de SOL usam o signatário conectado.

5. Página

app/page.tsx renderiza os componentes de conexão da carteira e transferência de SOL (sem necessidade de Suspense):

6. Executar a aplicação

Terminal

$ npm run dev

Abra http://localhost:3000, conecte uma carteira Devnet e envie uma transferência de SOL.

1. Criar provedor Solana

app/providers.tsx usa as props simplificadas SolanaProvider. Defina o cluster (Devnet por padrão).

2. Atualizar layout

Envolva a sua aplicação com o componente Providers. Atualize app/layout.tsx para importá-lo e usá-lo:

Isto envolve toda a aplicação com o contexto Solana para que todos os componentes filhos possam aceder ao estado da carteira e aos hooks.

3. Botão de conexão de carteira

Menu suspenso para conectar/desconectar carteiras Wallet Standard via useConnectWallet / useDisconnectWallet.

Opções do menu suspenso da carteira

Menu suspenso da carteira conectada

4. Transferência de SOL

Use useSolTransfer para enviar uma transferência de SOL (lamports) para qualquer endereço.

Formulário de transferência de SOL preenchido

Transferência de SOL bem-sucedida

Os conectores são o mesmo conjunto do Wallet Standard (Phantom/Solflare/Backpack/descoberta automática); uma vez conectados, as transferências de SOL usam o signatário conectado.

5. Página

app/page.tsx renderiza os componentes de conexão da carteira e transferência de SOL (sem necessidade de Suspense):

6. Executar a aplicação

Terminal

$ npm run dev

Abra http://localhost:3000, conecte uma carteira Devnet e envie uma transferência 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

Pré-requisitos

Criar projeto Next.js

Instalar dependências Solana

1. Criar provedor Solana

2. Atualizar layout

3. Botão de conexão de carteira

4. Transferência de SOL

5. Página

6. Executar a aplicação

1. Criar provedor Solana

2. Atualizar layout

3. Botão de conexão de carteira

4. Transferência de SOL

5. Página

6. Executar a aplicação

Índice