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 defined de 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.
• useMemo estabiliza 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 createSolanaRpc do 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

FAQs

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.