Next.js

Complete guide to integrating Phantom Connect in a Next.js application.

1. Install dependencies

npm install @phantom/react-sdk @solana/web3.js

2. Create the provider

// app/providers.tsx
"use client";

import { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"],
        appId: "your-app-id", // Get from phantom.com/portal
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "https://yourapp.com/auth/callback",
        },
      }}
      theme={darkTheme}
      appName="Your App"
    >
      {children}
    </PhantomProvider>
  );
}

3. Wrap your layout

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

4. Create the auth callback page

// app/auth/callback/page.tsx
"use client";

import { ConnectBox } from "@phantom/react-sdk";

export default function AuthCallback() {
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
      <ConnectBox />
    </div>
  );
}

5. Add connect button to your page

// app/page.tsx
"use client";

import { useModal, usePhantom, useAccounts, useDisconnect, useSolana } from "@phantom/react-sdk";

export default function Home() {
  const { open } = useModal();
  const { isConnected, isLoading } = usePhantom();
  const addresses = useAccounts();
  const { disconnect } = useDisconnect();
  const { solana } = useSolana();

  if (isLoading) return <p>Loading...</p>;

  if (isConnected && addresses) {
    return (
      <main>
        <p>Connected: {addresses[0]?.address}</p>
        <button onClick={() => solana.signMessage("Hello!")}>Sign Message</button>
        <button onClick={() => disconnect()}>Disconnect</button>
      </main>
    );
  }

  return (
    <main>
      <h1>Welcome</h1>
      <button onClick={open}>Connect Wallet</button>
    </main>
  );
}

6. Configure Phantom Portal

Go to phantom.com/portal
Create or select your app
Add your domain to allowed URLs
Add https://yourapp.com/auth/callback to redirect URLs
Copy your App ID

Overview

Authentication

Payments

Signatures

Wallet operations

Transactions

Quickstarts

1. Install dependencies

2. Create the provider

3. Wrap your layout

4. Create the auth callback page

5. Add connect button to your page

6. Configure Phantom Portal

​1. Install dependencies

​2. Create the provider

​3. Wrap your layout

​4. Create the auth callback page

​5. Add connect button to your page

​6. Configure Phantom Portal

1. Install dependencies

2. Create the provider

3. Wrap your layout

4. Create the auth callback page

5. Add connect button to your page

6. Configure Phantom Portal