Deploy a Next.js App with OpenClaw

Deploy a Next.js app with OpenClaw on Fly.io. This pattern gives you a full-stack AI web app with complete control.

Project Structure

/
├── app/
│   ├── page.tsx           # Frontend
│   └── api/
│       └── chat/
│           └── route.ts   # OpenClaw backend
├── fly.toml
└── package.json

API Route (OpenClaw backend)

// app/api/chat/route.ts
import { NextResponse } from 'next/server'
import { openclaw } from '@/lib/openclaw'

export async function POST(req: Request) {
  const { message } = await req.json()
  const response = await openclaw.chat(message)
  return NextResponse.json({ response })
}

Frontend

// app/page.tsx
'use client'
import { useState } from 'react'

export default function Home() {
  const [message, setMessage] = useState('')
  const [response, setResponse] = useState('')

  async function send() {
    const data = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message })
    }).then(r => r.json())
    setResponse(data.response)
  }

  return (
    <main>
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={send}>Ask</button>
      {response && <p>{response}</p>}
    </main>
  )
}

Deploy

npm run build
fly launch --no-deploy
fly secrets set OPENAI_API_KEY=sk-...
fly deploy