@xrpl-wallet-kit/next

Next.js helper exports for XRPL Wallet Kit.

This package keeps Next.js integrations pointed at the client-safe React bindings while allowing apps to depend on a Next-specific package name.

Install

npm install @xrpl-wallet-kit/next @xrpl-wallet-kit/client

Choosing a setup

Use @xrpl-wallet-kit/client for the shortest default-wallet setup. For a smaller selective build, combine @xrpl-wallet-kit/core, @xrpl-wallet-kit/react (or this package), and only the adapter packages you support. The client package includes the first-party adapter factories even when configuration enables a subset.

Client Component Usage

"use client";

import { createWalletKit } from "@xrpl-wallet-kit/client";
import { WalletKitProvider, WalletButton } from "@xrpl-wallet-kit/next";

const kit = createWalletKit({
  metadata: {
    name: "My XRPL App",
    description: "Wallet connection for My XRPL App",
    url: typeof window !== "undefined" ? window.location.origin : "https://my-xrpl-app.example",
    icons: ["https://my-xrpl-app.example/icon.png"],
  },
  network: "mainnet",
  autoReconnect: true,
  walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
  ui: {
    accountPanel: {
      showBalance: true,
      showRecentTransactions: true,
    },
    toast: true,
  },
});

export function WalletConnectButton() {
  return (
    <WalletKitProvider manager={kit.manager}>
      <WalletButton />
    </WalletKitProvider>
  );
}

The exported WalletButton also supports host attributes and a WalletButtonHandle ref. This is useful when a Client Component needs the underlying mount element or imperative UI controller.

App Router Notes

• Use wallet hooks and browser configuration from Client Components. Provider children remain present in server-rendered HTML.
• @xrpl-wallet-kit/react now publishes the same client boundary; this package remains a Next-specific discoverability alias.
• Prefix browser-exposed environment variables with NEXT_PUBLIC_.
• Keep auth verification and private API secrets in server routes.
• For Sign-In with XRPL, pair this package with @xrpl-wallet-kit/auth.

Related

• @xrpl-wallet-kit/react - underlying React provider, hooks, and button
• @xrpl-wallet-kit/client - default wallet kit factory
• @xrpl-wallet-kit/auth - Sign-In with XRPL helpers