This is a Next.js starter kit bootstrapped from Mini App Next Template
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Verify environment variables:
The environment variables enable the following features:
- Frame metadata - Sets up the Frame Embed that will be shown when you cast your frame
- Account assocation - Allows users to add your frame to their account, enables notifications
- Redis API keys - Enable Webhooks and background notifications for your application by storing users notification details
# Required for Frame metadata
NEXT_PUBLIC_URL=
NEXT_PUBLIC_MINIKIT_PROJECT_ID=
# Required to allow users to add your frame
NEXT_PUBLIC_FARCASTER_HEADER=
NEXT_PUBLIC_FARCASTER_PAYLOAD=
NEXT_PUBLIC_FARCASTER_SIGNATURE=
# Required for user authentication
NEYNAR_API_KEY=
JWT_SECRET=
# Required for webhooks and background notifications
REDIS_URL=
REDIS_TOKEN=- Start the development server:
npm run dev- Run a local tunneling server
- Generate your Farcaster Manifest variables
- Follow these instructions
- Visit Manifest Tool
- Paste your tunnel domain
.well-known/farcaster.jsonendpoint configured for Frame metadata and account association- Frame metadata automatically added to page headers in
layout.tsx
- Redis-backed notification system using Upstash
- Ready-to-use notification endpoints in
api/notifyandapi/webhook - Notification client utilities in
lib/notification-client.ts
The app is wrapped with MiniKitProvider in providers.tsx, configured with:
- OnchainKit integration
- Access to Frames context
- Sets up Wagmi Connectors
- Sets up Frame SDK listeners
- Applies Safe Area Insets
dynamic-image-example/[id]/page.tsxshow how to create a Mini App URL resolving to a custom preview imageapi/og/example/[id]/route.tsshows how to generate a custom preview image