> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

<CodeGroup>
  ```bash npm theme={null}
  npm create hono@latest my-app
  ```

  ```bash yarn theme={null}
  yarn create hono my-app
  ```

  ```bash pnpm theme={null}
  pnpm create hono my-app
  ```
</CodeGroup>

Select "vercel" as your template when prompted.

## Installation

Add Hono to your existing Vercel project:

```bash theme={null}
npm install hono
```

## Basic Usage

Create your API in the `api` directory:

```typescript api/index.ts theme={null}
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)
```

<Note>
  The `handle` adapter converts your Hono app into a Vercel serverless function.
</Note>

## Routing

### Single API Route

Handle all API routes in one file using `basePath`:

```typescript api/[[...route]].ts theme={null}
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:

```typescript api/users/index.ts theme={null}
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)
```

```typescript api/posts/index.ts theme={null}
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:

```typescript theme={null}
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:

```typescript api/index.ts theme={null}
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:

```json vercel.json theme={null}
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "functions": {
    "api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 10
    }
  },
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api"
    }
  ]
}
```

## Middleware

### CORS

```typescript api/index.ts theme={null}
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

```typescript api/index.ts theme={null}
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

<Steps>
  <Step title="Install Vercel CLI">
    ```bash theme={null}
    npm install -g vercel
    ```
  </Step>

  <Step title="Login to Vercel">
    ```bash theme={null}
    vercel login
    ```
  </Step>

  <Step title="Deploy">
    ```bash theme={null}
    vercel
    ```

    For production:

    ```bash theme={null}
    vercel --prod
    ```
  </Step>
</Steps>

### Deploy via Git

Connect your Git repository to Vercel:

1. Push your code to GitHub, GitLab, or Bitbucket
2. Go to [Vercel Dashboard](https://vercel.com/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:

```typescript pages/api/[[...route]].ts theme={null}
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:

```json package.json theme={null}
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
```

## Edge Functions

Deploy to Vercel's Edge Runtime:

```typescript api/edge/[[...route]].ts theme={null}
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)
```

<Note>
  Edge Functions run on Vercel's Edge Network for ultra-low latency worldwide.
</Note>

## Database Integration

### Vercel Postgres

```bash theme={null}
npm install @vercel/postgres
```

```typescript api/users.ts theme={null}
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)

```bash theme={null}
npm install @vercel/kv
```

```typescript api/cache.ts theme={null}
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

<AccordionGroup>
  <Accordion title="Use basePath for API routes">
    Always set `basePath('/api')` to match your API directory structure.
  </Accordion>

  <Accordion title="Optimize for Edge Runtime">
    Use Edge Functions for globally distributed, low-latency APIs.
  </Accordion>

  <Accordion title="Use environment variables">
    Store secrets in Vercel's environment variables, not in code.
  </Accordion>

  <Accordion title="Implement caching">
    Use Vercel KV or edge caching for better performance.
  </Accordion>
</AccordionGroup>

## 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

<CardGroup cols={2}>
  <Card title="Vercel Documentation" icon="book" href="https://vercel.com/docs">
    Official Vercel documentation
  </Card>

  <Card title="Edge Functions" icon="bolt" href="https://vercel.com/docs/functions/edge-functions">
    Learn about Edge Functions
  </Card>
</CardGroup>