Skip to content
LogoLogo

Next.js

Payment middleware for Next.js

Native Next.js route handler wrapper that gates routes behind payment intents.

Install

Usage

Import Mppx and tempo from mppx/nextjs to create a Next.js-aware payment handler. Each intent (for example, charge) returns a wrapper that accepts a route handler.

app/api/premium/route.ts
import { Mppx,  } from 'mppx/nextjs'
 
const  = Mppx.({ : [.()] }) 
 
export const  = 
  .({ : '1' }) 
  (() => .({ : 'paid content' }))

Session payments

Use mppx.session() with tempo.session() to gate routes behind current v2 Sessions.

app/api/content/route.ts
import {  } from 'mppx'
import { Mppx,  } from 'mppx/nextjs'
import {  } from 'viem/accounts'
 
const  = ('0x0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef')
 
const  = Mppx.({
  : [
    .({
      ,
      : 4217,
      : '0x20c0000000000000000000000000000000000000', // pathUSD on Tempo
      : .(),
    }),
  ],
})
 
export const  =
  .({ : '1', : 'token' })
  (() => .({ : 'session content' }))

Identifying the payer

After the handler verifies payment, the Authorization header is still on the request. Parse it with Credential.deserialize to read the payer's identity from the source field—a DID such as did:pkh:eip155:1:0x....

app/api/premium/route.ts
import {  } from 'mppx'
import { Mppx,  } from 'mppx/nextjs'
 
const  = Mppx.({ : [.()] })
 
export const  =
  .({ : '1' })
  (() => {
    const  = .(..('Authorization')!)
    const  = . // "did:pkh:eip155:1:0x..."
    return .({  })
  })