x402 Next.js Starter

Create an x402 Next.js app in less than 2 minutes!

This package provides a complete Next.js application template with x402 payment protocol integration, allowing you to quickly set up a web application with payment middleware.

Quick Start

npx @payai/x402-next-starter my-app
cd my-app
cp env.example .env.local
# Edit .env.local with your configuration
npm run dev

What's Included

• ⚡ Next.js 14 with App Router
• 💳 x402 payment middleware integration
• 🎨 Tailwind CSS for styling
• 📝 TypeScript support
• 🔧 ESLint and Prettier configuration
• 🚀 Ready-to-deploy API routes
• 📖 Comprehensive documentation

Features

Payment Integration

• x402 payment middleware for protecting routes
• Support for multiple networks (Base, Solana)
• Configurable payment amounts and tokens
• Automatic payment verification

Developer Experience

• TypeScript for type safety
• ESLint and Prettier for code quality
• Hot reloading in development
• Production-ready build configuration

Example Implementation

• Free weather API endpoint
• Premium content with payment protection
• Modern, responsive UI
• Clear documentation and examples

Configuration

After creating your app, you'll need to configure:

1. Environment Variables: Update .env.local with your wallet address and facilitator URL
2. Payment Settings: Customize payment amounts and networks in middleware.ts
3. Styling: Modify Tailwind CSS classes or add custom styles

Project Structure

The generated app includes:

├── app/
│   ├── api/                 # API routes
│   ├── premium/             # Premium content page
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Home page
├── middleware.ts            # x402 payment middleware
├── next.config.js           # Next.js configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Dependencies and scripts

Learn More

• x402 Protocol Documentation
• Next.js Documentation
• Tailwind CSS Documentation

License

Apache-2.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.