Vercel

Deploy Hono applications to Vercel

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

npm create hono@latest my-app

yarn create hono my-app

pnpm create hono 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

Use basePath for API routes

Always set basePath('/api') to match your API directory structure.

Optimize for Edge Runtime

Use Edge Functions for globally distributed, low-latency APIs.

Use environment variables

Store secrets in Vercel’s environment variables, not in code.

Implement caching

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