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.

Last updated