Demo — Next.js SDK

x402 Next.js SDK

A drop-in x402 middleware that detects AI agents, processes USDC micropayments, and automatically serves LLM-optimized Markdown instead of standard HTML.

View Demo BlogSetup

3 Lines of Code

Export middleware, configure matcher, export API route. No refactoring needed.

Smaller Payloads

Measured on this demo: HTML 28.3KB. Markdown 2KB. 93% smaller.

Works with Any Content

Processes rendered HTML. Works whether you use CMS, database, MDX, or React components.

Setup

1. Install
npm install @x402/next-sdk
2. Create middleware.ts
middleware.ts
export { middleware } from '@x402/next-sdk/middleware';

export const config = {
  matcher: ['/blog/:path*'],
};
3. Create app/api/x402/route.ts
app/api/x402/route.ts
export { GET } from '@x402/next-sdk/route';
4. Configure .env.local
X402_PRICE_USDC=500000
X402_MERCHANT_WALLET_ADDRESS=0xYourAddress
X402_CHAIN_ID=84532

How It Works

1

AI agent requests /blog/post with User-Agent: ClaudeBot

2

Middleware intercepts the request and returns 402 Payment Required

3

Agent pays 0.50 USDC on the Base network

4

Middleware verifies the payment and rewrites the request internally to /api/x402

5

The API route fetches the HTML, extracts core content using Readability, and converts it with Turndown

6

Agent receives clean, parsed Markdown (no navigation, ads, or styling)

Test It

Simulate an AI agent request by passing the appropriate headers:

curl -H "User-Agent: ClaudeBot/1.0" \
     http://localhost:3000/blog/intro-to-x402