Vercel Storage

Vercel Storage provides several specialized packages for different data needs. The current active packages include:

• @vercel/blob: Fast object storage for files and large assets.
• @vercel/global-config: Provides ultra-low latency data reads (formerly known as @vercel/edge-config).
• @vercel/edge-config: The former name of @vercel/global-config. Use @vercel/global-config for new projects.
• @vercel/edge-config-fs: Edge-compatible filesystem utilities for Edge Config.

There are two primary ways to upload files to Vercel Blob depending on your file size requirements and architecture:

1. Server uploads: The file is sent to your server first, then to Vercel Blob. This is the most common method but is limited by your server's request body size. If hosted on Vercel, you cannot upload files larger than 4.5 MB using this method.
2. Client uploads: The file is sent directly from the client (e.g., a browser) to Vercel Blob. This is recommended for larger files as it supports uploads up to 5 TB.

Values returned by get and getAll are immutable. Because of internal optimizations, multiple calls for the same key may return references to the same object. Mutating these objects can cause side effects across your application. To safely modify a returned value, use the clone function.

import { get, clone } from '@vercel/global-config';

const original = await get('someKey');
const mutableCopy = clone(original);
// Now you can safely modify mutableCopy

The package is compatible with the Edge Runtime and can be used in environments like Vercel Edge Functions.

// Next.js (pages/api/edge.js)
import { get } from '@vercel/edge-config';

export default async (req) => {
  const value = await get("someKey");
  return new Response(`someKey contains value "${value}"`);
};

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

Install the @vercel/global-config package via npm. This package is a drop-in replacement for @vercel/edge-config and allows you to read Global Config (formerly Edge Config) values.

npm install @vercel/global-config

To use the Vercel Blob JavaScript API client, install the package via npm:

npm install @vercel/blob

The @vercel/kv package is deprecated. To migrate, use @upstash/redis.

Follow the Upstash Redis documentation to set up your new instance and update your implementation.

Install the Edge Config client using npm to read configuration values from your Edge Config store.

npm install @vercel/edge-config

Vite does not automatically expose .env variables on process.env. To use @vercel/global-config in Nuxt, SvelteKit, or other Vite-based frameworks, you must either:

1. Populate process.env manually using dotenv-expand in your vite.config.js.
2. Provide credentials explicitly by importing the variable from your framework's specific environment module (e.g., $env/static/private in SvelteKit) and passing it to createClient.

// Example for SvelteKit using explicit credentials
import { createClient } from '@vercel/global-config';
import { GLOBAL_CONFIG } from '$env/static/private';

const edgeConfig = createClient(GLOBAL_CONFIG);
const value = await edgeConfig.get('someKey');

By default, the SDK uses no-store for fetches, which triggers dynamic rendering in Next.js. To use Global Config with static pages, create a client with the cache: 'force-cache' option. Note that this may result in displaying stale values.

import { createClient } from '@vercel/global-config';

const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG, {
  cache: 'force-cache',
});

// Use the client as usual
const value = await edgeConfigClient.get('someKey');

By default, the SDK uses no-store for fetches, which triggers dynamic rendering in Next.js. To use Edge Config with static pages, you must explicitly opt out of dynamic behavior by passing the cache: 'force-cache' option to createClient.

Warning: Using force-cache means the page may display stale values if the Edge Config changes.

import { createClient } from '@vercel/edge-config';

const edgeConfigClient = createClient(process.env.EDGE_CONFIG, {
  cache: 'force-cache',
});

// Use the client as usual
const value = await edgeConfigClient.get('someKey');