Documentação SolanaFrontend

Next.js + Kit

Configure uma integração mínima de carteira Solana no Next.js (App Router) com @solana/kit, os plugins do kit e @solana/react. Você criará um dropdown de conexão de carteira e um componente de transferência de SOL.

Next.js Kit AppNext.js Kit App

Recursos

Pré-requisitos

  • Node 20+
  • npm

Criar Projeto Next.js

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

$ 
cd my-app

Quando solicitado, aceite todos os padrões (o modelo inicial inclui Tailwind, que este tutorial usa para estilos utilitários simples).

Dois ajustes no modelo inicial

A saída padrão do create-next-app precisa de duas pequenas alterações para este tutorial:

  • Em tsconfig.json, defina "target": "ES2020" (ou posterior). Os valores de transferência usam literais bigint como 1_000_000_000n, que exigem ES2020.
  • Em app/globals.css, remova o bloco @media (prefers-color-scheme: dark) gerado e a regra de fundo do body. Esta interface é apenas para modo claro; os padrões escuros, caso contrário, substituem o utilitário bg-white e tornam a página ilegível no modo escuro.

Instalar dependências do Solana

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

Este tutorial tem como alvo o Kit 7+, os pacotes @solana/kit-plugin-* na versão 0.13+ (0.14+ para @solana/kit-plugin-wallet) e @solana/react 7+.

1. Criar o Provedor Solana

app/providers.tsx cria um cliente no escopo do módulo e o disponibiliza com ClientProvider. O plugin walletSigner define a carteira conectada como pagadora de taxas e identidade; exporte o tipo do cliente para que os componentes possam tipar useClient.

2. Atualizar o Layout

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

Isso envolve toda a aplicação com o contexto Solana, permitindo que todos os componentes filhos acessem o cliente e os hooks de carteira.

3. Botão de Conexão de Carteira

Menu suspenso para conectar/desconectar carteiras Wallet Standard. useWallets retorna as carteiras detectadas no navegador; useConnect / useDisconnect retornam um ActionResult — este componente utiliza seus campos dispatch, isRunning e error. Todo hook de carteira recebe o cliente como primeiro argumento, portanto obtenha-o de useClient<AppClient>() primeiro.

Opções do menu suspenso da carteiraOpções do menu suspenso da carteira

Carteira conectada no menu suspensoCarteira conectada no menu suspenso

4. Transferência de SOL

Construa uma instrução de transferência com @solana-program/system e envie-a por meio de client.sendTransaction. A carteira conectada assina e paga.

Formulário de transferência de SOL preenchidoFormulário de transferência de SOL preenchido

Transferência de SOL concluída com sucessoTransferência de SOL concluída com sucesso

As carteiras são detectadas via Wallet Standard; uma vez conectada, a transferência de SOL utiliza o signatário conectado como pagador de taxas.

5. Página

app/page.tsx renderiza os componentes de conexão de carteira e transferência de SOL:

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 o Provedor Solana

app/providers.tsx cria um cliente no escopo do módulo e o disponibiliza com ClientProvider. O plugin walletSigner define a carteira conectada como pagadora de taxas e identidade; exporte o tipo do cliente para que os componentes possam tipar useClient.

2. Atualizar o Layout

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

Isso envolve toda a aplicação com o contexto Solana, permitindo que todos os componentes filhos acessem o cliente e os hooks de carteira.

3. Botão de Conexão de Carteira

Menu suspenso para conectar/desconectar carteiras Wallet Standard. useWallets retorna as carteiras detectadas no navegador; useConnect / useDisconnect retornam um ActionResult — este componente utiliza seus campos dispatch, isRunning e error. Todo hook de carteira recebe o cliente como primeiro argumento, portanto obtenha-o de useClient<AppClient>() primeiro.

Opções do menu suspenso da carteiraOpções do menu suspenso da carteira

Carteira conectada no menu suspensoCarteira conectada no menu suspenso

4. Transferência de SOL

Construa uma instrução de transferência com @solana-program/system e envie-a por meio de client.sendTransaction. A carteira conectada assina e paga.

Formulário de transferência de SOL preenchidoFormulário de transferência de SOL preenchido

Transferência de SOL concluída com sucessoTransferência de SOL concluída com sucesso

As carteiras são detectadas via Wallet Standard; uma vez conectada, a transferência de SOL utiliza o signatário conectado como pagador de taxas.

5. Página

app/page.tsx renderiza os componentes de conexão de carteira e transferência de SOL:

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 { 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>;

}

Is this page helpful?

Anterior

React

Próximo

Migrando para o Kit

Índice

Editar Página
Use Solana
Desenvolver
Empresarial
Produtos
Ecossistema
Agentes de IA
© 2026 Fundação Solana. Todos os direitos reservados.