Providers e App Router
Conecte providers de carteira e RPC no Next.js App Router sem crashes de SSR.
Receita
// app/layout.tsx
import { SolanaProvider } from "./solana-provider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<SolanaProvider>{children}</SolanaProvider>
</body>
</html>
);
}// app/solana-provider.tsx
"use client";Quando usar:
- Qualquer dApp Solana Next.js 13+ com App Router.
- Prevenir
window is not definedde SDKs de carteira. - Compartilhar estado de conexão entre rotas.
Exemplo Prático
// app/solana-provider.tsx
"use client";
import { useMemo } from "react";
import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
import "@solana/wallet-adapter-react-ui/styles.css";
export function SolanaProvider({ children }: { children: React.ReactNode }) {
const endpoint = process.env.NEXT_PUBLIC_RPC_URL!;
const wallets = useMemo(
() => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
[]
);
return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>{children}</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
}O que isso demonstra:
- Boundary client envolve todos os imports de carteira.
- Root layout permanece Server Component.
useMemoestabiliza instâncias de wallet adapter.
Aprofundamento
Como Funciona
- Server Components renderizam HTML sem APIs de browser.
- Providers client hidratam uma vez no nível de layout.
- Rotas aninhadas herdam contexto automaticamente.
- Combine com
createSolanaRpcdo kit dentro de hooks para leituras.
Erros Comuns
- Importar carteira em page.tsx sem "use client" - erro de build. Correção: divida shell server + ilha client.
- Providers duplicados em layouts aninhados - modais duplos. Correção: SolanaProvider único na raiz.
- Import de CSS ausente - estilos de modal quebrados.
- Prefetch SSR chamando hooks de carteira - crash. Correção: dynamic import com ssr:false se necessário.
- Env indisponível no build - RPC undefined. Correção: valide em next.config ou schema de env.
Alternativas
| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| Provider @wallet-ui/react | template create-solana-dapp | Investimento existente em adapter |
| Pages Router | App legado apenas | App Router greenfield |
FAQs
App Router?
Providers em client layout.tsx; pages misturam server + client components.
Secrets?
Env de servidor só para keypairs; NEXT_PUBLIC_ para URLs de RPC.
kit 7.0.0?
Todos os exemplos usam @solana/kit, não web3.js v1.
Carteira?
Assinatura apenas em client components.
Cache?
Revalide leituras on-chain com cuidado - a chain é fonte da verdade.
Actions?
Endpoints HTTPS retornando JSON de Solana Actions.
Mobile?
App React Native separado com MWA.
Testes?
Surfpool para integração; mock RPC em testes unitários.
Mainnet?
Arquivos env e program IDs separados.
Erros?
Decodifique logs de simulação para mensagens voltadas ao usuário.
Relacionado
- Noções Básicas de Integração de dApp - estrutura
- Wallet Adapter - setup de adapter
- Assinatura no Lado do Client - fluxos de assinatura
Versões da stack: Esta página foi escrita para Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0 e LiteSVM 0.6.x.