Skip to content
New Project

S3 Movie Search

Amazon S3 general purpose buckets with Next.js and Vercel

DeployView Demo
Template Thumbnail

Amazon S3 Movie Poster Search

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

Getting Started

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.

Requirements

  • Installed Amazon S3 through the Vercel AWS Marketplace integration
  • Node.js 20 or newer
  • The Vercel CLI

Local Setup

  1. Link the directory to a Vercel project and pull its environment variables:

    npx vercel link
    npx vercel env pull .env.local

    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.

  2. Install dependencies:

    npm install
  3. Prepare the catalog and poster files:

    npm run prepare:static
  4. Upload the files directly to the connected S3 bucket:

    npm run upload:s3
  5. Start the development server:

    npm run dev
  6. 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.

GitHub
Ownervercel
Repositoryaws-s3-general-purpose-buckets-demo
Use Cases
Starter
Stack
Next.js
Database
AWS S3

Related Integrations

AWS

Serverless, reliable, secure AWS Services.

DeployView Demo
LicenseView License