Skip to main content

Setting up a Next.js app

The SDK works in Next.js. The wallet only exists in the browser, so wallet code lives in a Client Component.

Create and install​

npx create-next-app@latest my-miniapp --typescript --app
cd my-miniapp
npm install @crackpay/miniapp-sdk viem

A Client Component for the wallet​

app/CrackPayApp.tsx
"use client";

import { useCrackPay } from "@crackpay/miniapp-sdk/react";

export function CrackPayApp() {
  const crackpay = useCrackPay();

  if (crackpay.status === "connecting") return <p>Loading…</p>;
  if (crackpay.status !== "connected") return <p>Open this app from CrackPay.</p>;
  return <p>Hi {crackpay.handle ? `@${crackpay.handle}` : crackpay.account}</p>;
}
app/page.tsx
import { CrackPayApp } from "./CrackPayApp";

export default function Page() {
  return <CrackPayApp />;
}

The SDK is safe to import during server rendering: with no browser, everything resolves to null and nothing throws.

Allow framing​

Next.js sends no X-Frame-Options by default. If you add security headers, allow CrackPay:

next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [{ key: "Content-Security-Policy", value: "frame-ancestors 'self' https://www.crackpay.xyz https://crackpay.xyz https://crackpay.vercel.app" }],
      },
    ];
  },
};

export default nextConfig;

Test locally​

npm run dev            # port 3000
ngrok http 3000

Load the ngrok URL in CrackPay's Developer mode.