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.
npx @payai/x402-next-starter my-app
cd my-app
cp env.example .env.local
# Edit .env.local with your configuration
npm run dev- ⚡ 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
- x402 payment middleware for protecting routes
- Support for multiple networks (Base, Solana)
- Configurable payment amounts and tokens
- Automatic payment verification
- TypeScript for type safety
- ESLint and Prettier for code quality
- Hot reloading in development
- Production-ready build configuration
- Free weather API endpoint
- Premium content with payment protection
- Modern, responsive UI
- Clear documentation and examples
After creating your app, you'll need to configure:
- Environment Variables: Update
.env.localwith your wallet address and facilitator URL - Payment Settings: Customize payment amounts and networks in
middleware.ts - Styling: Modify Tailwind CSS classes or add custom styles
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
Apache-2.0
Contributions are welcome! Please feel free to submit a Pull Request.