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.

Execute create-next-app with pnpm to bootstrap the example:

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

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. You must configure cors, for the upload to work
   1. S3 Documentation

   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": [
           "s3:DeleteObject",
           "s3:GetObject",
           "s3:ListBucket",
           "s3:PutObject",
           "s3:PutObjectAcl"
         ],
         "Resource": ["arn:aws:s3:::BUCKET_NAME", "arn:aws:s3:::BUCKET_NAME/*"]
       }
     ]
   }
   

6. Run cdk bootstrap.
7. Run cdk deploy to create an S3 bucket with an IAM policy.
8. Visit your newly created S3 bucket and retrieve the name and region.
9. Add the name and region to .env.local.
10. Run pnpm dev to start the Next.js app at http://localhost:3000.
11. Choose a .png or .jpg file.
12. 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.

Deploy it to the cloud with Vercel (Documentation).

Credentials and Environment Variables

AWS credentials (e.g. AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY) and region configuration (e.g. AWS_REGION) can now be used directly as environment variables for Vercel deployments.

These variables are the default names expected by the AWS SDK, which means the user no longer has to configure credentials when using it. For example, this code is no longer necessary:

const s3 = new S3Client({
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET_ACCESS_KEY,
  region: process.env.REGION,
})

Instead, it can be replaced with this:

const s3 = new S3Client({});

The SDK will pick up the credentials from the environment automatically.

Commands

• pnpm 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