Amazon S3 general purpose buckets with Next.js and Vercel
This demo uses Amazon S3 general purpose buckets with Next.js to fetch movie metadata and poster images. It securely connects to S3 without hardcoded access tokens through Vercel's OIDC Federation.
Demo: View Demo
Click the "Deploy" button to clone this repo, create a new Vercel project, set up the AWS integration, and provision a new S3 general purpose bucket:
Every deployment prepares the catalog and posters and uploads them to the bucket before building, so the first deployment fills the bucket on its own.
To connect a bucket to an existing project instead, use the Vercel AWS Native Integration. It provisions an IAM role and adds the required S3 environment variables to the Vercel project.
Prepare the movie catalog and posters locally, then run npm run upload:s3.
The command uploads the files directly to the private S3 bucket using Vercel
OIDC credentials. The catalog contains 4,395 poster-backed movies from the
TMDB 5000 Movie Dataset;
movies without a confirmed poster are omitted.
For complete preparation, upload, verification, and troubleshooting steps, see the S3 and Vercel setup guide.
Link the directory to a Vercel project and pull its environment variables:
vercel env pull reads the project's Development environment. The Deploy
button connects the bucket to every environment, but connecting it from the
dashboard leaves Development unchecked by default. If .env.local has no
S3_BUCKET_NAME, edit the bucket's project connection, enable Development,
and pull again.
Install dependencies:
Prepare the catalog and poster files:
Upload the files directly to the connected S3 bucket:
Start the development server:
View local development at http://localhost:3000.
The S3 bucket remains private. Vercel exchanges its OIDC token for temporary AWS credentials, and poster responses are cached on Vercel's CDN.
This product uses the TMDB API but is not endorsed or certified by TMDB.
