app-overview.mp4
- Built-in auth
- Photo upload with EXIF extraction
- Organize photos by tag
- Infinite scroll
- Light/dark mode
- Automatic OG image generation
- CMD-K menu with photo search
- Experimental support for AI-generated descriptions
- Support for Fujifilm simulations
- Click Deploy
- Add required storage (Vercel Postgres + Vercel Blob) as part of template installation
- Configure environment variables from project settings:
NEXT_PUBLIC_SITE_TITLE
(e.g., My Photos)NEXT_PUBLIC_SITE_DOMAIN
(e.g., photos.domain.com)NEXT_PUBLIC_SITE_DESCRIPTION
(optional—mainly used for OG meta)
- Generate auth secret and add to environment variables:
AUTH_SECRET
- Add admin user to environment variables:
ADMIN_EMAIL
ADMIN_PASSWORD
- Trigger redeploy
- Visit project on Vercel, navigate to "Deployments" tab, click ••• button next to most recent deployment, and select "Redeploy"
- Visit
/admin
- Sign in with credentials supplied in Step 2
- Click "Upload Photos"
- Add optional title
- Click "Create"
- Clone code
- Run
pnpm i
to install dependencies - Set environment variable
AUTH_URL
locally (not in production) tohttp://localhost:3000/api/url
(this is a temporary limitation ofnext-auth
v5.0 Beta) - If necessary, install Vercel CLI and log in by running
vercel login
- Run
vercel link
to connect the CLI to your project - Run
vercel dev
to start dev server with Vercel-managed environment variables
Usage of this feature will result in fees from OpenAI. When enabling AI text generation, follow all recommended mitigations in order to avoid unexpected charges and attacks. Make sure your OpenAI secret key environment variable is not prefixed with NEXT_PUBLIC.
- Setup OpenAI
- If you don't already have one, create an OpenAI account
- Generate an API key and store in environment variable
OPENAI_SECRET_KEY
- Setup usage limits to avoid unexpected charges (recommended)
- Add rate limiting (recommended)
- As an additional precaution, create a Vercel KV store and link it to your project in order to enable rate limiting
- Configure auto-generated fields (optional)
- Set which text fields auto-generate when uploading a photo by storing a comma-separated list, e.g.,
AI_TEXT_AUTO_GENERATED_FIELDS = title,semantic
- Accepted values: title, caption, tags, description, all, or none (default is "all")
- Set which text fields auto-generate when uploading a photo by storing a comma-separated list, e.g.,
- Open project on Vercel
- Click "Analytics" tab
- Follow "Enable Web Analytics" instructions (
@vercel/analytics
already included)
- Open project on Vercel
- Click "Speed Insights" tab
- Follow "Enable Speed Insights" instructions (
@vercel/speed-insights
already included)
Application behavior can be changed by configuring the following environment variables:
NEXT_PUBLIC_PRO_MODE = 1
enables higher quality image storage (results in increased storage usage)NEXT_PUBLIC_BLUR_DISABLED = 1
prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)NEXT_PUBLIC_GEO_PRIVACY = 1
disables collection/display of location-based dataNEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1
preventspriority_order
field affecting photo orderNEXT_PUBLIC_PUBLIC_API = 1
enables public API available at/api
NEXT_PUBLIC_HIDE_REPO_LINK = 1
removes footer link to repoNEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1
prevents Fujifilm simulations showing up in/grid
sidebarNEXT_PUBLIC_HIDE_EXIF_DATA = 1
hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)NEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5
sets aspect ratio for grid tiles (defaults to1
—setting to0
removes the constraint)NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM
keeps OG image text bottom aligned (default is top)
Only one storage adapter—Vercel Blob, Cloudflare R2, or AWS S3—can be used at a time. Ideally, this is configured before photos are uploaded (see Issue #34 for migration considerations). If you have multiple adapters, you can set one as preferred by storing "aws-s3," "cloudflare-r2," or "vercel-blob" in NEXT_PUBLIC_STORAGE_PREFERENCE
.
- Setup bucket
- Create R2 bucket with default settings
- Setup CORS under bucket settings:
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:3000", "https://{VERCEL_PROJECT_NAME}*.vercel.app", "{PRODUCTION_DOMAIN}" ] }]
- Enable public hosting by doing one of the following:
- Select "Connect Custom Domain" and choose a Cloudflare domain
- OR
- Select "Allow Access" from R2.dev subdomain
- Store public configuration:
NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET
: bucket nameNEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID
: account id (found on R2 overview page)NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN
: either "your-custom-domain.com" or "pub-jf90908...s0d9f8s0s9df.r2.dev" (do not include "https://" in your domain)
- Setup private credentials
- Create API token by selecting "Manage R2 API Tokens," and clicking "Create API Token"
- Select "Object Read & Write," choose "Apply to specific buckets only," and select the bucket created in Step 1
- Store credentials (
⚠️ Ensure access keys are not prefixed withNEXT_PUBLIC
):CLOUDFLARE_R2_ACCESS_KEY
CLOUDFLARE_R2_SECRET_ACCESS_KEY
- Setup bucket
- Create S3 bucket with "ACLs enabled," and "Block all public access" turned off
- Setup CORS under bucket permissions:
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:*", "https://{VERCEL_PROJECT_NAME}*.vercel.app", "{PRODUCTION_DOMAIN}" ], "ExposeHeaders": [] }]
- Store public configuration
NEXT_PUBLIC_AWS_S3_BUCKET
: bucket nameNEXT_PUBLIC_AWS_S3_REGION
: bucket region, e.g., "us-east-1"
- Setup private credentials
- Create IAM policy using JSON editor:
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectACL", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject" ], "Resource": [ "arn:aws:s3:::{BUCKET_NAME}", "arn:aws:s3:::{BUCKET_NAME}/*" ] } ] }
- Create IAM user by choosing "Attach policies directly," and selecting the policy created above. Create "Access key" under "Security credentials," choose "Application running outside AWS," and store credentials (
⚠️ Ensure access keys are not prefixed withNEXT_PUBLIC
):AWS_S3_ACCESS_KEY
AWS_S3_SECRET_ACCESS_KEY
- Create IAM policy using JSON editor:
Vercel Postgres can be switched to another Postgres-compatible, pooling provider by updating POSTGRES_URL
. Some providers only work when SSL is disabled, which can configured by setting DISABLE_POSTGRES_SSL = 1
.
- Ensure connection string is set to "Transaction Mode" via port
6543
- Disable SSL by setting
DISABLE_POSTGRES_SSL = 1
Absent configuration, the default grid aspect ratio is
1
. It can be set to any number (for instance1.5
for 3:2 images) viaNEXT_PUBLIC_GRID_ASPECT_RATIO
or ignored entirely by setting to0
.
This template statically optimizes core views such as
/
and/grid
to minimize visitor load times. Consequently, when photos are added, edited, or removed, it might take several minutes for those changes to propagate. If it seems like a change is not taking effect, try navigating to/admin/configuration
and clicking "Clear Cache."
My images/content have fallen out of sync with my database and/or my production site no longer matches local development. What do I do?
Navigate to
/admin/configuration
and click "Clear Cache."
Navigate to
/admin/configuration
and click "Clear Cache." If this doesn't help, open an issue.
Fujifilm simulation data is stored in vendor-specific Makernote binaries embedded in EXIF data. Under certain circumstances an intermediary may strip out this data. For instance, there is a known issue on iOS where editing an image, e.g., cropping it, causes Makernote data loss. If your simulation data appears to be missing, try importing the original file as it was stored by the camera. Additionally, if you can confirm the simulation mode on camera, you can then edit the photo record and manually select it.
For a number of reasons, only EXIF orientations: 1, 3, 6, and 8 are supported. Orientations 2, 4, 5, and 7—which make use of mirroring—are not supported.
Earlier versions of this template generated blur data on the client, which varied visually from browser to browser. Data is now generated consistently on the server. If you wish to update blur data for a particular photo, edit the photo in question, make no changes, and choose "Update."