X402 Next.js Solana Template

https://solana.com/developers/templates/x402-template
Admin
A Next.js starter template that integrates the X402 payment protocol for Solana, enabling easy...
Tokens:2,976
Snippets:25
Trust Score:10
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install and Run X402 Next.js Solana Template

Source: https://solana.com/developers/templates/x402-template/index

Instructions to clone the template, install dependencies, and run the development server. This is the initial setup for using the X402 Next.js Solana template.

```bash
npx create-solana-dapp my-app --template x402-template

cd my-app

pnpm install

pnpm dev
```

--------------------------------

### Creating Protected Content Page

Source: https://solana.com/developers/templates/x402-template/index

This example illustrates how to create a protected content page within the Next.js application. The `PremiumPage` component is placed under a protected route defined in the middleware, demonstrating how to render content that requires payment.

```tsx
// app/content/premium/page.tsx
export default async function PremiumPage() {
  return (
    <div>
      <h1>Premium Content</h1>
      <p>This content requires payment to access.</p>
      {/* Your protected content here */}
    </div>
  )
}
```

--------------------------------

### Template Dependencies

Source: https://solana.com/developers/templates/x402-template/index

This JSON snippet outlines the project's dependencies, managed by npm or yarn. It lists the core packages used, including Next.js for the framework, React for UI, viem for Ethereum/Solana types, and x402-next for the payment middleware.

```json
{
  "dependencies": {
    "next": "16.0.0",
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "viem": "^2.38.5",
    "x402-next": "^0.7.1"
  }
}
```

--------------------------------

### Project Structure Overview

Source: https://solana.com/developers/templates/x402-template/index

This snippet outlines the directory structure of the X402 template project. It highlights key files and directories such as middleware configuration, application pages, components, utility functions, static assets, and package dependencies.

```tree
x402-template/
├── middleware.ts              # 🛡️  X402 payment middleware configuration
├── app/
│   ├── page.tsx              # 🏠 Homepage with links to protected content
│   ├── layout.tsx            # 📐 Root layout
│   ├── globals.css           # 🎨 Global styles
│   └── content/
│       └── [type]/
│           └── page.tsx      # 🔒 Protected content pages
├── components/
│   └── cats-component.tsx    # 🐱 Example content component
├── lib/                      # 📚 Utility functions (if needed)
├── public/                   # 📁 Static assets
└── package.json              # 📦 Dependencies
```

--------------------------------

### Customizing Routes and Prices with Middleware

Source: https://solana.com/developers/templates/x402-template/index

This code snippet demonstrates how to configure protected routes and their associated prices within the `middleware.ts` file using the `paymentMiddleware` function. It specifies routes like '/premium' and '/api/data', their prices, descriptions, and the network they operate on.

```typescript
const x402PaymentMiddleware = paymentMiddleware(
  address,
  {
    '/premium': {
      price: '$1.00',
      config: {
        description: 'Premium content access',
      },
      network: 'solana-mainnet-beta',
    },
    '/api/data': {
      price: '$0.05',
      config: {
        description: 'API data access',
      },
      network: 'solana-mainnet-beta',
    },
  },
  // ... rest of config
)
```

--------------------------------

### Environment Variables Configuration

Source: https://solana.com/developers/templates/x402-template/index

This snippet shows essential environment variables for configuring the X402 payment middleware. It includes placeholders for the Solana wallet address, network selection, Coinbase Commerce client key, and facilitator URL. These variables are typically defined in a .env.local file.

```env
# Your Solana wallet address (where payments go)
NEXT_PUBLIC_WALLET_ADDRESS=your_solana_address_here

# Network (solana-devnet or solana-mainnet-beta)
NEXT_PUBLIC_NETWORK=solana-devnet

# Coinbase Pay Client Key (get from Coinbase Developer Portal)
NEXT_PUBLIC_CDP_CLIENT_KEY=your_client_key_here

# Facilitator URL (service that verifies payments)
NEXT_PUBLIC_FACILITATOR_URL=https://x402.org/facilitator
```

--------------------------------

### Configure X402 Payment Middleware in Next.js

Source: https://solana.com/developers/templates/x402-template/index

Configuration of the X402 payment middleware using the `x402-next` package within a Next.js application. This code sets up payment routes, prices, and necessary credentials for processing cryptocurrency payments.

```typescript
import { Address } from 'viem'
import { paymentMiddleware, Resource, Network } from 'x402-next'
import { NextRequest } from 'next/server'

// Your Solana wallet address that receives payments
const address = 'CmGgLQL36Y9ubtTsy2zmE46TAxwCBm66onZmPPhUWNqv' as Address
const network = 'solana-devnet' as Network
const facilitatorUrl = 'https://x402.org/facilitator' as Resource
const cdpClientKey = '3uyu43EHCwgVIQx6a8cIfSkxp6cXgU30'

const x402PaymentMiddleware = paymentMiddleware(
  address,
  {
    '/content/cheap': {
      price: '$0.01',
      config: {
        description: 'Access to cheap content',
      },
      network,
    },
    '/content/expensive': {
      price: '$0.25',
      config: {
        description: 'Access to expensive content',
      },
      network,
    },
  },
  {
    url: facilitatorUrl,
  },
  {
    cdpClientKey,
    appLogo: '/logos/x402-examples.png',
    appName: 'x402 Demo',
    sessionTokenEndpoint: '/api/x402/session-token',
  },
)

export const middleware = (req: NextRequest) => {
  const delegate = x402PaymentMiddleware as unknown as (
    request: NextRequest,
  ) => ReturnType<typeof x402PaymentMiddleware>
  return delegate(req)
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)', '/'],
}
```
Tokens:
Raw