Next.Js 14 - AWS S3 Image Upload using API Route

In this video I will guide you thru the process of creating an AWS S3 Bucket and applying public permissions so that files are available to anyone of the internet.

In the second half of the video, I'll demonstrate creating a file upload form using NextJs and the official AWS S3 Client SDK. I will use a client-side approach to create the form component and for the file uploads I will implement a backed API endpoint using Route handlers.

Policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::project-name-prod/*"
}
]
}

Discounts:

Recording Equipment:

Computer Gear:

Connect with me:

Chapters:
◾ 0:00 Introduction:
◾ 0:30 S3 Bucket Setup
◾ 3:41 IAM Uuser Setup
◾ 6:14 Next.Js AWS S3 SDK + API
◾ 26:04 Next.Js Upload Form

#nextjs #aws

[RaddyDev]

Hey everyone, I've come across a few S3 horror stories recently and wanted to share a word of caution. Please be mindful when using 'pay only for what you use' services, as bills can stack up quickly if something goes wrong. Regularly review your cost and usage reports and set up AWS Budgets for alerts. And like BobBoblsSwag said, please don't use the "NEXT_PUBLIC_" prefix before the environment variables.

[gabriele]

Explained in a simple way without missing anything => perfect tutorial

[xovAvox]

This is exactly the functionality I wanted to implement in my application, but I could never get it to work on my own. This tutorial is the only one out of many that I watched that actually worked for me! Thank you so much!

[BobBobIsSwag]

Hey, please don't use the "NEXT_PUBLIC_" prefix before the environment variables because this makes them publicly available to the client browser. These env variables are only supposed to be used Server Side through Api Routes/Server Actions. This creates a security vulnerability.

[JustinTiell]

This video was amazing! I kept finding ones that almost solved the issue, but this was perfect for my needs.

[himynameisvirgil]

You save my life and my Thank you so much for the tutorial. I read a lot but none was as clear as your tutorial.

[tanmaypant]

THANK YOU MUCH FOR THIS MASTERPIECE!!
I am really looking forward for more on aws!

[tegasteve]

Thank you so much. THis video was really helpful

[RaddyDev]

I hope that you find the video useful.

[anubhav]

Great video Hope u create more on AWS Services from nextjs

[eraybaydemir]

my man it is very clear and good video. Thank you al lpt for your generous contribition. I loved your clear explanation and to the point statements and you have explained every little detail for us to understand completeyly keep it up buddy!!

one thing I want to ask is why didnt we put headers params while writing the fecting request. I expected that we should write the classic:

'Content-Type' : 'application/json'

[Rajvirnahar]

Subscribed. can you do a video where you show how to add these stored images in S3 to to ur website front end?

[CaseStudyQB]

Great tutorial, i wish i knew how to get the final public path back through the api

[z_]

Hello!
The bundle size is 3.04 MB... Will it affect the performance of my next app?

I don't get it - are You uploading image from the server? So you send image to Your server and then it sends to remote server?

[YashKumar-cjgx]

Hey can you give the code which gives us the public link on the same page of our image after uploading it to S3

[ExtremelyDumb]

Hey, I think I'm following your setup instructions line by line but can't get this working. I've updated next and node, but whenever I use ThunderClient I get a 200 response and an empty error (the 'image not uploaded' error is triggering but replacing with `error` throws a blank response).

Checking AWS under my access key, it's not being successfully called. I've checked the .env.local file and copied the formatting you placed in the video and the github, and copied that same formatting. How can I further debug this, since the console and the outputs are not telling me where the code is failing?

[injamulhaque]

the bucket policy given in the description is not working, I have added "s3:PutObject" in the Actions array then it is working, did I do it correct?

[amranmohamed]

How do you get the policy; you justed pasted from out no where 😅

[ongame]

How to get the image url or show the images to our website? I have tried using the AWS SDK Client S3 but it doesn't work.
Can you give some explanation? Is there a tutorial about this? Thanks in advance🙌