Skip to main content
Vercel is a cloud platform for static sites and serverless functions. Deploy your Hono applications to Vercel’s edge network with ease.

​
Quick Start

Create a new Hono project for Vercel: 
npm create hono@latest my-app
Select “vercel” as your template when prompted.

​
Installation

Add Hono to your existing Vercel project: 
npm install hono

​
Basic Usage

Create your API in the api directory:
api/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({ message: 'Hello from Vercel!' })
})

app.post('/data', async (c) => {
  const body = await c.req.json()
  return c.json({ received: body })
})

export default handle(app)
The handle adapter converts your Hono app into a Vercel serverless function.

​
Routing

​
Single API Route

Handle all API routes in one file using basePath:
api/[[...route]].ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono().basePath('/api')

app.get('/users', (c) => c.json([{ id: 1, name: 'John' }]))
app.get('/users/:id', (c) => {
  const id = c.req.param('id')
  return c.json({ id, name: 'John' })
})
app.post('/users', async (c) => {
  const body = await c.req.json()
  return c.json({ created: body })
})

export default handle(app)

​
Multiple API Routes

Create separate files for different routes:
api/users/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono().basePath('/api/users')

app.get('/', (c) => c.json([{ id: 1, name: 'John' }]))
app.post('/', async (c) => {
  const body = await c.req.json()
  return c.json({ created: body })
})

export default handle(app)
api/posts/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono().basePath('/api/posts')

app.get('/', (c) => c.json([{ id: 1, title: 'Hello' }]))

export default handle(app)

​
Connection Info

Get connection information: 
import { Hono } from 'hono'
import { handle, getConnInfo } from 'hono/vercel'

const app = new Hono().basePath('/api')

app.get('/info', (c) => {
  const info = getConnInfo(c)
  return c.json({
    remote: info.remote,
  })
})

export default handle(app)

​
Environment Variables

Access environment variables in your Hono app:
api/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono().basePath('/api')

app.get('/config', (c) => {
  return c.json({
    apiKey: process.env.API_KEY,
    environment: process.env.VERCEL_ENV,
  })
})

export default handle(app)
Add environment variables in Vercel:
  1. Go to your project settings
  2. Navigate to “Environment Variables”
  3. Add your variables

​
Configuration

Create a vercel.json configuration file:
vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "functions": {
    "api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 10
    }
  },
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api"
    }
  ]
}

​
Middleware

​
CORS

api/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import { cors } from 'hono/cors'

const app = new Hono().basePath('/api')

app.use('/*', cors({
  origin: 'https://yourdomain.com',
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
}))

app.get('/data', (c) => c.json({ message: 'CORS enabled' }))

export default handle(app)

​
Authentication

api/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import { bearerAuth } from 'hono/bearer-auth'

const app = new Hono().basePath('/api')

app.use(
  '/protected/*',
  bearerAuth({ token: process.env.AUTH_TOKEN! })
)

app.get('/protected/data', (c) => {
  return c.json({ secret: 'data' })
})

export default handle(app)

​
Deployment

1

Install Vercel CLI

npm install -g vercel
2

Login to Vercel

vercel login
3

Deploy

vercel
For production:
vercel --prod

​
Deploy via Git

Connect your Git repository to Vercel:
  1. Push your code to GitHub, GitLab, or Bitbucket
  2. Go to Vercel Dashboard
  3. Click “Import Project”
  4. Select your repository
  5. Configure settings and deploy
Vercel will automatically deploy on every push to your main branch.

​
Project Structure

Typical Vercel + Hono project structure: 
my-vercel-app/
├── api/
│   ├── index.ts
│   └── [[...route]].ts
├── public/
│   └── index.html
├── package.json
├── tsconfig.json
└── vercel.json

​
Combining with Frontend Frameworks

​
With Next.js

Hono works alongside Next.js API routes:
pages/api/[[...route]].ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => c.json({ message: 'Hello!' }))

export default handle(app)

​
With React/Vite

Use Hono for the API and Vite for the frontend:
package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

​
Edge Functions

Deploy to Vercel’s Edge Runtime:
api/edge/[[...route]].ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const config = {
  runtime: 'edge',
}

const app = new Hono().basePath('/api/edge')

app.get('/hello', (c) => {
  return c.json({ message: 'Hello from the edge!' })
})

export default handle(app)
Edge Functions run on Vercel’s Edge Network for ultra-low latency worldwide.

​
Database Integration

​
Vercel Postgres

npm install @vercel/postgres
api/users.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import { sql } from '@vercel/postgres'

const app = new Hono().basePath('/api')

app.get('/users', async (c) => {
  const { rows } = await sql`SELECT * FROM users`
  return c.json(rows)
})

export default handle(app)

​
Vercel KV (Redis)

npm install @vercel/kv
api/cache.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import { kv } from '@vercel/kv'

const app = new Hono().basePath('/api')

app.get('/cache/:key', async (c) => {
  const key = c.req.param('key')
  const value = await kv.get(key)
  return c.json({ value })
})

app.post('/cache/:key', async (c) => {
  const key = c.req.param('key')
  const { value } = await c.req.json()
  await kv.set(key, value)
  return c.json({ success: true })
})

export default handle(app)

​
Best Practices

Always set basePath('/api') to match your API directory structure.
Use Edge Functions for globally distributed, low-latency APIs.
Store secrets in Vercel’s environment variables, not in code.
Use Vercel KV or edge caching for better performance.

​
Performance Tips

  • Use Edge Functions for global distribution
  • Implement caching with Vercel KV
  • Optimize function memory settings
  • Use ISR (Incremental Static Regeneration) when possible
  • Enable compression for responses

​
Resources

Vercel Documentation

Official Vercel documentation

Edge Functions

Learn about Edge Functions

Build docs developers (and LLMs) love

Get started for freeTalk to us