Next.js & Vercel Blob example app

This example shows how to create an image gallery site using Next.js, Vercel Blob, and Tailwind.

Images are discovered at build time via the @vercel/blob SDK's list() API, then probed with sharp to derive dimensions and pre-generate base64 blur placeholders for next/image. The blob url is served as-is — next/image (Vercel's image optimizer) takes care of responsive avif/webp variants.

Deploy your own

Deploy the example using Vercel:

Check out our Next.js deployment documentation for more details.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

1
npx create-next-app --example with-vercel-blob with-vercel-blob-app

1
yarn create next-app --example with-vercel-blob with-vercel-blob-app

1
pnpm create next-app --example with-vercel-blob with-vercel-blob-app

Setup

1. Create a Vercel Blob store and upload your images to its root.
2. Copy .env.local.example to .env.local and set BLOB_READ_WRITE_TOKEN to the store's read/write token. (When deploying via the button above, set it as an environment variable on the project.)
3. npm install && npm run dev.

References

• Vercel Blob: https://vercel.com/docs/storage/vercel-blob
• @vercel/blob SDK: https://vercel.com/docs/storage/vercel-blob/using-blob-sdk
• next/image: https://nextjs.org/docs/api-reference/next/image