> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dzap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js example

> Minimal Next.js App Router embed of the DZap swap widget.

A client component wrapping `DZapWidgetProvider` + `SwapWidget`. Full source: [`examples/next`](https://github.com/DZapIO/widget/tree/main/examples/next) in the [widget repo](https://github.com/DZapIO/widget).

## App Router page

```tsx theme={null}
'use client';

import { ConnectWalletButton, DZapWidgetProvider, SwapWidget } from '@dzapio/widget';
import '@dzapio/widget/styles.css';

const config = {
  walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID ?? 'YOUR_PROJECT_ID',
  dzapApiKey: process.env.NEXT_PUBLIC_DZAP_API_KEY,
  appName: 'DZap Next.js Example',
  theme: 'dark' as const,
};

export default function WidgetApp() {
  return (
    <DZapWidgetProvider config={config}>
      <main style={{ minHeight: '100vh', padding: '2rem' }}>
        <div style={{ maxWidth: 420, margin: '0 auto' }}>
          <ConnectWalletButton />
          <div style={{ marginTop: '1rem' }}>
            <SwapWidget />
          </div>
        </div>
      </main>
    </DZapWidgetProvider>
  );
}
```

## Environment

```
NEXT_PUBLIC_WC_PROJECT_ID=your-walletconnect-project-id
NEXT_PUBLIC_DZAP_API_KEY=your-dzap-api-key
```

## Run from the widget monorepo

```bash theme={null}
pnpm install
pnpm --filter @dzapio/widget build
pnpm --filter dzap-widget-example-next dev
```

Open [http://localhost:3003](http://localhost:3003).

See [Installation](/widget/installation) for Next.js notes (client components, no Buffer polyfill in typical setups).