Overview
Image Gallery Starter is a public creator gallery for hosted generative media. It ships as a one-page Next.js app with hero previews, featured image groups, archive cards, collection stacks, protected image interactions, and a lightbox for prompt, model, and size metadata.
Use it when you want a deployable image portfolio rather than a private dashboard or managed SaaS product. The app reads ordered Cloudflare Images records from one source file, renders public NEXT_PUBLIC_* delivery URLs, and includes static security headers, a small CSP, deploy configs, and optional Sentry observability.
What you can build
- A public AI image portfolio for generated artwork.
- A prompt archive with model notes and hosted media metadata.
- A Cloudflare Images-backed gallery with hero, featured, archive, and collection views.
- A lightbox browsing experience with prompt, model, and size details.
- A static showcase that can be redeployed after replacing the starter image records.
What you need
- Next.js for the public App Router experience and production build.
- React for gallery interactions, lightbox state, and responsive UI.
- Base UI for accessible interaction primitives.
- Cloudflare Images for hosted image delivery.
- Public image delivery config with
NEXT_PUBLIC_CLOUDFLARE_IMAGES_ACCOUNT_HASH. - Sentry for optional production observability.
- For hosting, you can deploy using DigitalOcean, Netlify, Railway, Render, or Vercel.
Description flow
Visitors enter through the public homepage and browse a curated gallery without signing in. The page presents hero previews, featured works, archive cards, generated collections, and deploy links for the standalone starter.
The gallery owner replaces the records in lib/gallery/source-gallery-images.ts with their own Cloudflare Images IDs, variants, dimensions, titles, prompts, model labels, and alt text. The hero, featured, archive, and collection views all read from that shared source so the visible surfaces stay consistent.
At runtime, the app builds image URLs from the configured Cloudflare Images account hash, delivery origin, image ID, and variant or options string. ProtectedImage discourages browser drag and context-menu downloads, while next.config.ts applies the static security headers and CSP needed for the public gallery surface.
Once deployed, visitors can open each work in the lightbox and move through the collection while prompt, model, and size metadata stay close to the media. If NEXT_PUBLIC_SENTRY_DSN is configured, client and server errors report to Sentry; otherwise the monitoring path no-ops cleanly.