mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Joseph
ec76f095ab
Closes: https://github.com/vercel/next.js/issues/96204 The fix to manage rewrites introduced in https://github.com/vercel/next.js/pull/82236 PR made it so that, push/replace without explicit pathname broke the `as` pattern, for example in `with-vercel-blob`. Also documents the resolution rule in the `useRouter` API reference.
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:
npx create-next-app --example with-vercel-blob with-vercel-blob-app
yarn create next-app --example with-vercel-blob with-vercel-blob-app
pnpm create next-app --example with-vercel-blob with-vercel-blob-app
Setup
- Create a Vercel Blob store and upload your images to its root.
- Copy
.env.local.exampleto.env.localand setBLOB_READ_WRITE_TOKENto the store's read/write token. (When deploying via the button above, set it as an environment variable on the project.) npm install && npm run dev.
References
- Vercel Blob: https://vercel.com/docs/storage/vercel-blob
@vercel/blobSDK: https://vercel.com/docs/storage/vercel-blob/using-blob-sdknext/image: https://nextjs.org/docs/api-reference/next/image