Phox is a discontinued static photo site generator for Next.js that turns Markdown pages and EXIF/IPTC image metadata into a server-rendered, statically exported gallery.
What is Phox?
Phox is a Node.js tool that builds photo websites on top of Next.js. It reads Markdown files for page content and reads EXIF and IPTC metadata from JPEG images to generate album pages, image detail pages, and keyword overview pages automatically. Created by Emanuel Kluge, Phox provides an HTTP API for views to fetch data and a command-line export that runs Next.js's static export to produce an HTML site in the out folder. Phox is discontinued; the author now uses Gatsby for his photo site.
Key Features
- Automatic detail pages — Every photo in an album gets a page populated with title, description, camera, lens, ISO, aperture, focal length, exposure time, flash, GPS coordinates, orientation, width, and height, all extracted from EXIF and IPTC metadata.
- Keyword overview pages — Each IPTC keyword generates a tag page listing all photos that carry that keyword.
- Markdown content management — Pages and album descriptions are written as Markdown files with optional YAML frontmatter, mirroring the content workflow of Jekyll and Gatsby.
- Server-side rendering and client-side routing — Next.js server-renders HTML for fast initial loads, and routes client-side for smooth navigation without full page reloads.
- Image compression at build — During export, Phox can convert images to progressive JPEGs and compress PNGs via pngquant; quality defaults to 65–80 and is configurable in phox.config.js.
- HTTP API for views — Endpoints like /data/index.json, /data/albums/album.json, /data/albums/album/image.json, and /data/tag/tag.json supply all content and metadata to your custom React page components.
- Expected page structure — Phox anticipates files named album.js, default.js, image.js, index.js, and tag.js in your Next.js pages folder; it provides data for each via its HTTP API.
Who is it for?
- Photographers who want a portfolio site where shooting details are shown automatically from metadata instead of manually typed.
- Next.js developers who prefer to build their own React components and need a data layer and build pipeline for a gallery.
- Lightroom/Capture One users who already embed titles, descriptions, and keywords in image files and want that content to drive the website.
What can you do with Phox?
- Photo bloggers: publish albums with markdown-written narratives and let the site generate per-image pages from metadata.
- Developers: create a custom photo site with React views fetched from Phox's JSON API, then export it as a static site for Netlify or other hosts.
- Metadata gurus: define titles, captions, camera, lens, ISO, aperture, focal length, exposure time, flash, and GPS in tools like Lightroom; Phox surfaces all of it on the site without extra data entry.
How does Phox work?
Install phox, next, react, and react-dom, then create a server.js that calls createServer from Phox and listens on port 3000. Structure your project with a content folder for Markdown and a static folder for album images. Run npm run dev to preview locally. For production, add a next.config.js exporting getPathMap, run npm run export, and the static site appears in the out directory.
Pros and cons
- Automatic metadata-based pages save hours of manual HTML.
- Markdown workflow is familiar to Jekyll/Gatsby users.
- Static export runs on any host without a server.
- No included React views — you must write album.js, image.js, tag.js, and index.js yourself.
- Custom Express routes work only during development, not in the static export.
- Discontinued — no further maintenance; the author suggests Gatsby for new projects.
Alternatives
- Gatsby — a React-based static site generator the author switched to for photo sites; offers built-in image processing and a larger plugin ecosystem.
- Jekyll — a simpler Markdown-based static generator; Phox's content model is inspired by it but Phox adds EXIF/IPTC handling and Next.js rendering.
FAQ
Is Phox still maintained?
No. The author announced on the repository that Phox is discontinued, noting that Next.js is too basic for photo-site needs and that he has moved his photo website to Gatsby.
What does Phox do?
Phox generates static photo sites from Markdown files and image metadata. It reads EXIF and IPTC data from JPEGs, creates album and detail pages, provides an HTTP API for custom views, and exports the result as static HTML via Next.js.
Does Phox include ready-made React components?
No. Phox deliberately provides no React views. It only supplies data via an HTTP API and a path map for export; you build page components such as album.js, image.js, and tag.js yourself.
Can I add custom routes to my Phox site?
During development you can use Express Router, which Phox re-exports as Router, to add routes. These custom routes are not available after static export, so they are limited to dev-time features.
What image metadata does Phox read?
It reads IPTC fields for title, description, keywords, and creation date, plus EXIF fields for camera, lens, ISO, aperture, focal length, exposure time, flash, and GPS. It also calculates orientation, width, and height.
