This is an example of a Next.js application allowing you to upload photos to an S3 bucket.
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.
AmazonS3FullAccess
.aws configure
..env.local
file similar to .env.example
.{ "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).
Use AWS S3 to upload images to a bucket from a Next.js application.
This is an example of a Next.js application allowing you to upload photos to an S3 bucket.
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.
AmazonS3FullAccess
.aws configure
..env.local
file similar to .env.example
.{ "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).