Loading...
Loading...
Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.
npx skill4agent add vercel-labs/vercel-plugin vercel-storagevercel integration add ...vercel env pull .env.local --yesnpm install @vercel/blobimport { put, del, list, get } from '@vercel/blob'
// Upload from server (public)
const blob = await put('images/photo.jpg', file, {
access: 'public',
})
// blob.url → public URL
// Upload private file
const privateBlob = await put('docs/secret.pdf', file, {
access: 'private',
})
// Read private file back
const privateFile = await get(privateBlob.url) // returns ReadableStream + metadata
// Client upload (up to 5 TB)
import { upload } from '@vercel/blob/client'
const blob = await upload('video.mp4', file, {
access: 'public',
handleUploadUrl: '/api/upload', // Your token endpoint
})
// List blobs
const { blobs } = await list()
// Conditional get with ETags
const response = await get('images/photo.jpg', {
ifNoneMatch: previousETag,
})
if (response.statusCode === 304) {
// Not modified, use cached version
}
// Delete
await del('images/photo.jpg')access: 'private'get()npm install @vercel/edge-configimport { get, getAll, has } from '@vercel/edge-config'
// Read a single value (< 1ms at the edge)
const isFeatureEnabled = await get('feature-new-ui')
// Read multiple values
const config = await getAll(['feature-new-ui', 'ab-test-variant', 'redirect-rules'])
// Check existence
const exists = await has('maintenance-mode')@vercel/edge-config@^1.4.3cacheComponentsproxy.tsmiddleware.ts@neondatabase/serverless@^1.0.2npm install @neondatabase/serverless// Direct Neon usage
import { neon } from '@neondatabase/serverless'
const sql = neon(process.env.DATABASE_URL!)
const users = await sql`SELECT * FROM users WHERE id = ${userId}`
// With Drizzle ORM
import { drizzle } from 'drizzle-orm/neon-http'
import { neon } from '@neondatabase/serverless'
const sql = neon(process.env.DATABASE_URL!)
const db = drizzle(sql)neon()DATABASE_URLnext build// src/db/index.ts — lazy initialization (safe for build time)
import { neon } from '@neondatabase/serverless'
import { drizzle } from 'drizzle-orm/neon-http'
import * as schema from './schema'
function createDb() {
const sql = neon(process.env.DATABASE_URL!)
return drizzle(sql, { schema })
}
let _db: ReturnType<typeof createDb> | null = null
export function getDb() {
if (!_db) _db = createDb()
return _db
}ProxydbProxygetDb()letdrizzle-kittsx.env.localdotenv# Option 1: Source env vars before running
source <(grep -v '^#' .env.local | sed 's/^/export /') && npx drizzle-kit push
# Option 2: Use dotenv-cli (recommended for scripts)
npm install -D dotenv-cli
npx dotenv -e .env.local -- npx drizzle-kit push
npx dotenv -e .env.local -- npx tsx scripts/seed.ts.env.localnpm install @upstash/redisimport { Redis } from '@upstash/redis'
const redis = Redis.fromEnv() // Uses UPSTASH_REDIS_REST_URL & TOKEN
// Basic operations
await redis.set('session:abc', { userId: '123' }, { ex: 3600 })
const session = await redis.get('session:abc')
// Rate limiting
import { Ratelimit } from '@upstash/ratelimit'
const ratelimit = new Ratelimit({
redis,
limiter: Ratelimit.slidingWindow(10, '10s'),
})
const { success } = await ratelimit.limit('user:123')npm install @supabase/supabase-js @supabase/ssrimport { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
const { data, error } = await supabase.from('users').select('*')vercel integration add supabasenpm install prisma @prisma/client
npx prisma initimport { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
const users = await prisma.user.findMany()vercel integration add prismanpm install mongodbimport { MongoClient } from 'mongodb'
const client = new MongoClient(process.env.MONGODB_URI!)
const db = client.db('myapp')
const users = await db.collection('users').find({}).toArray()vercel integration add mongodb-atlasnpm install convex
npx convex devimport { query } from './_generated/server'
import { v } from 'convex/values'
export const getUsers = query({
args: {},
handler: async (ctx) => {
return await ctx.db.query('users').collect()
},
})npm install @libsql/clientimport { createClient } from '@libsql/client'
const turso = createClient({
url: process.env.TURSO_DATABASE_URL!,
authToken: process.env.TURSO_AUTH_TOKEN!,
})
const result = await turso.execute('SELECT * FROM users')vercel integration add turso| Need | Use | Package |
|---|---|---|
| File uploads, media, documents | Vercel Blob | |
| Feature flags, A/B config | Edge Config | |
| Relational data, SQL queries | Neon Postgres | |
| Key-value cache, sessions, rate limiting | Upstash Redis | |
| Postgres + auth + realtime + storage | Supabase | |
| Type-safe ORM with migrations | Prisma | |
| Document database, flexible schemas | MongoDB Atlas | |
| Reactive backend with real-time sync | Convex | |
| Edge-native SQLite with replicas | Turso | |
| Full-text search | Neon Postgres (pg_trgm) or Elasticsearch (Marketplace) | varies |
| Vector embeddings | Neon Postgres (pgvector) or Pinecone (Marketplace) | varies |
- import { sql } from '@vercel/postgres'
+ import { neon } from '@neondatabase/serverless'
+ const sql = neon(process.env.DATABASE_URL!)
@neondatabase/vercel-postgres-compat@vercel/postgres- import { kv } from '@vercel/kv'
- await kv.set('key', 'value')
- const value = await kv.get('key')
+ import { Redis } from '@upstash/redis'
+ const redis = Redis.fromEnv()
+ await redis.set('key', 'value')
+ const value = await redis.get('key')https://vercel.com/dashboard/{team}/stores# Install a storage integration (auto-provisions env vars)
vercel integration add neon
vercel integration add upstash
# List installed integrations
vercel integration listhttps://vercel.com/dashboard/{team}/integrations