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. 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/*"
            ]
         }
      ]
      }
      

3. Run `cdk bootstrap`.
4. Run `cdk deploy` to create an S3 bucket with an IAM policy.
5. Visit your newly created S3 bucket and retrieve the name and region.
6. Add the name and region to `.env.local`.
7. Run `yarn dev` to start the Next.js app at `localhost:3000`.
8. Choose a `.png` or `.jpg` file.
9. You should see your file successfully uploaded to S3.

This example uses [`createPresignedPost`](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#createPresignedPost-property) instead of [`getSignedUrlPromise`](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#getSignedUrlPromise-property) 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`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash
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).