Sats Connect - Wallet API for Bitcoin & Stacks
  • Introduction
  • Wallet Providers
    • getInfo
    • getProviders & getProviderById
  • Connecting to the wallet
    • Connect to Xverse Wallet
    • Disconnect from Xverse Wallet
    • Connect to other wallets
      • Manage a user's default wallet
    • [Legacy ⚠️] getAccounts
  • Wallet Methods
    • request methods
    • wallet_getAccount
    • wallet_getNetwork
    • wallet_changeNetwork
    • Xverse Custom Methods
  • Xverse Wallet Permissions
  • Xverse Wallet events
  • BITCOIN METHODS
    • 🟠getAddresses
    • 🟠signMessage
    • 🟠signPsbt
    • 🟠sendTransfer
    • 🟠signMultipleTransactions
    • 🟠getBalance
    • 🎨createInscription
    • 🎨createRepeatInscriptions
    • 🎨ord_getInscriptions
    • 🎨ord_sendInscriptions
    • 🔲runes_getBalance
    • 🔲runes_transfer
    • 🔲Mint Runes
      • runes_estimateMint
      • runes_mint
    • 🔲Etch Runes
      • runes_estimateEtch
      • runes_etch
    • 🔲runes_getOrder
    • 🔲Speed up a Rune Mint or Etch order
      • 🔲runes_estimateRbfOrder
      • 🔲runes_rbfOrder
  • STACKS METHODS
    • 🔴stx_getAccounts
    • 🔴stx_signMessage
    • 🔴stx_signStructuredMessage
    • 🔴stx_transferStx
    • 🔴stx_signTransaction
    • 🔴stx_callContract
    • 🔴stx_deployContract
  • GUIDES
    • Verify Bitcoin message signatures
    • Creating Bitcoin PSBTs
    • 📱Mobile Integration
    • Next.js support
  • RESOURCES
    • App Template
    • Demo App
    • Changelog
    • Github Issues
    • Developer forum
    • BIP322
Powered by GitBook
On this page
  1. GUIDES

Next.js support

Sats Connect is meant to be run client-side only. When using Next.js, import `sats-connect` dynamically:

"use client";

export default function Home() {
  const handleConnect = async () => {
    const { AddressPurpose, default: wallet } = await import("sats-connect");
    const response = await wallet.request("getAccounts", {
      purposes: [AddressPurpose.Stacks, AddressPurpose.Payment],
    });
    console.log(response);
  };
}

Alternatively, if sats-connect is being used in a single component, the component should be imported using dynamic:

const MyComponentUsingSatsConnect = dynamic(
  () => import("@/components/MyComponentUsingSatsConnect"),
  {
    ssr: false,
  }
);

If you don't need the wallet selector UI packaged with Sats Connect, you can use the equivalent methods directly from @sats-connect/core without needing to load it dynamically.

PreviousMobile Integration

Last updated 1 year ago