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.
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
s3:DeleteObject
, s3:GetObject
, s3:ListBucket
, s3:PutObject
, s3:PutObjectAcl
.env.local
file similar to .env.example
.env.local
file, use the information from your access key, along with the region and bucket name.
[{"AllowedHeaders": ["*"],"AllowedMethods": ["GET","PUT","POST","DELETE"],"AllowedOrigins": ["*"],"ExposeHeaders": []}]
pnpm dev
or npm run dev
to start the Next.js app at http://localhost:3000..png
or .jpg
file.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).
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 client = new S3Client({ region: process.env.AWS_REGION });
Source: AWS Environment Variable Default “Load Credential”
The SDK will pick up the credentials from the environment automatically.
pnpm dev
or npm run dev
– Starts the Next.js app at localhost:3000
.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.
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
s3:DeleteObject
, s3:GetObject
, s3:ListBucket
, s3:PutObject
, s3:PutObjectAcl
.env.local
file similar to .env.example
.env.local
file, use the information from your access key, along with the region and bucket name.
[{"AllowedHeaders": ["*"],"AllowedMethods": ["GET","PUT","POST","DELETE"],"AllowedOrigins": ["*"],"ExposeHeaders": []}]
pnpm dev
or npm run dev
to start the Next.js app at http://localhost:3000..png
or .jpg
file.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).
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 client = new S3Client({ region: process.env.AWS_REGION });
Source: AWS Environment Variable Default “Load Credential”
The SDK will pick up the credentials from the environment automatically.
pnpm dev
or npm run dev
– Starts the Next.js app at localhost:3000
.