Last Updated: 3/9/2026

Vercel

Vercel  is a cloud platform for deploying and hosting web applications with zero configuration. It provides automatic deployments from Git, edge functions, and global CDN distribution.

Hono works seamlessly on Vercel with zero configuration required.

Quick Start

Create a new Hono app for Vercel:

npm create hono@latest my-app

Select vercel when prompted.

Setup

1. Create Project

::: code-group

npm create hono@latest my-app
cd my-app
npm install

yarn create hono my-app
cd my-app
yarn

pnpm create hono@latest my-app
cd my-app
pnpm install

bun create hono@latest my-app
cd my-app
bun install

:::

2. Install Vercel CLI

Install the Vercel CLI globally:

npm install -g vercel

See Vercel CLI documentation  for details.

3. Write Your Application

In index.ts or src/index.ts, export your Hono app as the default export:

import { Hono } from 'hono'
 
const app = new Hono()
 
app.get('/', (c) => {
  return c.text('Hello Vercel!')
})
 
app.get('/api/hello', (c) => {
  return c.json({
    message: 'Hello from Vercel',
    timestamp: new Date().toISOString(),
  })
})
 
export default app

Important: Export your app as export default app for Vercel to detect it.

4. Run Locally

Start the development server:

vercel dev

Access http://localhost:3000 in your browser.

5. Deploy

Deploy to Vercel:

vercel deploy

For production deployment:

vercel deploy --prod

Your app will be live at https://your-app.vercel.app.

Git Integration

Vercel automatically deploys from Git repositories.

Connect Repository

1. Push your code to GitHub, GitLab, or Bitbucket
2. Go to vercel.com/new 
3. Import your repository
4. Click Deploy

Every push to your repository will trigger a new deployment:

• Production: Pushes to main or master branch
• Preview: Pushes to other branches or pull requests

Configuration

vercel.json

Create vercel.json for custom configuration:

{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install"
}

Environment Variables

Set environment variables in the Vercel dashboard:

1. Go to Settings → Environment Variables
2. Add your variables
3. Redeploy your app

Access them in your code:

const app = new Hono()
 
app.get('/config', (c) => {
  return c.json({
    apiUrl: process.env.API_URL,
    environment: process.env.VERCEL_ENV, // 'production', 'preview', or 'development'
  })
})

For local development, create .env.local:

API_URL=http://localhost:3000/api
DATABASE_URL=postgresql://localhost/mydb

Edge Functions

Vercel Edge Functions run on Vercel’s edge network for low latency.

Enable Edge Runtime

Export a config object:

import { Hono } from 'hono'
 
const app = new Hono()
 
app.get('/', (c) => {
  return c.json({
    message: 'Running on the edge!',
    region: process.env.VERCEL_REGION,
  })
})
 
export default app
 
// Enable Edge Runtime
export const config = {
  runtime: 'edge',
}

Edge vs. Serverless

Serving Static Files

Vercel automatically serves files from the public/ directory:

Directory Structure

.
├── public
│   ├── favicon.ico
│   ├── robots.txt
│   └── images
│       └── logo.png
├── src
│   └── index.ts
└── package.json

Access static files:

• https://your-app.vercel.app/favicon.ico
• https://your-app.vercel.app/images/logo.png

Combining with Frontend Frameworks

Use Hono for API routes alongside frontend frameworks:

With Next.js

Create API routes in pages/api/ or app/api/:

// app/api/[[...route]]/route.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 Hono in Next.js!' })
})
 
export const GET = handle(app)
export const POST = handle(app)

With Vite

See Hono Vite plugins  for integration.

Custom Domains

Add Domain

1. Go to Settings → Domains
2. Add your domain
3. Update DNS records as instructed

Vercel automatically provisions SSL certificates.

Monitoring

Vercel provides built-in monitoring:

• Analytics: Traffic and performance metrics
• Logs: Real-time function logs
• Speed Insights: Core Web Vitals tracking

Access from your project dashboard.

Best Practices

Optimize for Edge

Keep edge functions lightweight:

// ✅ Good for edge
app.get('/api/data', async (c) => {
  const data = await fetch('https://api.example.com/data')
  return c.json(await data.json())
})
 
// ❌ Heavy for edge (use serverless instead)
app.get('/api/heavy', async (c) => {
  const result = await heavyDatabaseQuery()
  return c.json(result)
})

Use Environment Variables

Never commit secrets:

// ❌ Don't
const apiKey = 'secret-key-123'
 
// ✅ Do
const apiKey = process.env.API_KEY

Handle Errors

app.onError((err, c) => {
  console.error('Error:', err)
  return c.json(
    { error: 'Internal Server Error' },
    500
  )
})

Enable CORS for APIs

import { cors } from 'hono/cors'
 
app.use('/api/*', cors())

Troubleshooting

Build Fails

Check vercel.json build configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}

404 on Routes

Ensure your app is exported as default:

export default app // Required!

Environment Variables Not Working

Redeploy after adding environment variables in the dashboard.

What’s Next

• Vercel Documentation  - Official Vercel docs
• Hono on Vercel  - Vercel’s Hono guide
• Edge Functions  - Learn about edge runtime