Next.js + AWS S3 Upload

This is an example of a Next.js application allowing you to upload photos to an S3 bucket.

How to Use

Option 1: Use an existing S3 bucket.

Retrieve your existing access key, secret key, S3 bucket region and name. Provide those values after clicking "Deploy" to automatically set the environment variables.

Option 2: Create an S3 bucket.

1. Create a new IAM User:
   1. Choose programatic access.
   2. Select "Attach existing policies directly"
   3. Add AmazonS3FullAccess.
2. Save the access key and secret key for the IAM User.
   1. This is used for programmatic access in the API Route.
3. Install the AWS CLI:
   1. Run aws configure.
   2. Enter your root AWS user access key and secret key.
   3. Enter your default region.
4. Create an .env.local file similar to .env.example.
   1. Enter your access key and secret key from the IAM user.
5. Run cdk bootstrap.
6. Run cdk deploy to create an S3 bucket with an IAM policy.
7. Visit your newly created S3 bucket and retrieve the name and region.
8. Add the name and region to .env.local.
9. Run yarn dev to start the Next.js app at localhost:3000.
10. Choose a .png or .jpg file.
11. You should see your file successfully uploaded to S3.

This example uses createPresignedPost instead of getSignedUrlPromise to allow setting max/min file sizes with content-length-range.

Commands

• yarn dev – Starts the Next.js app at localhost:3000.
• cdk deploy – Deploy this stack to your default AWS account/region
• cdk diff – Compare deployed stack with current state
• cdk synth – Emits the synthesized CloudFormation template

Clone and Deploy

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/solutions/aws-s3-image-upload aws-s3-image-upload
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/solutions/aws-s3-image-upload aws-s3-image-upload

Copy the .env.example file in this directory to .env.local and set your AWS settings

cp .env.example .env.local

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).