Creating Next.js Apps with x402 Payment Protection

Build fullstack Next.js applications with HTTP 402 payment-gated routes using Algorand blockchain payments. Two patterns are available: the Proxy Pattern for middleware-level protection and the Route Handler Wrapper for per-endpoint control.

Prerequisites

Before using this skill, ensure:

1. Next.js 14+ App Router project is set up
2. Node.js 18+ is installed
3. Algorand address to receive payments (PAY_TO)
4. Facilitator URL is available (default: https://x402.org/facilitator)

Core Workflow: Two Integration Patterns

Pattern 1: Proxy (middleware.ts)           Pattern 2: withX402 (route.ts)