How to Upload Files into AWS S3 from Next.js [S3 Setup, Cloudfront, and AWS-SDK]

This video shows you how to setup an AWS S3 Bucket with Cloudfront CDN, then programmatically upload files into the bucket from a Next.js Application with the AWS SDK S3 Client package.
0:00 Introduction
1:00 Create Bucket
3:20 Setup Cloudfront Distribution
7:54 Custom Subdomain for Cloudfront with SSL
14:34 Creating IAM User
20:32 Next.js Application
22:46 Form Component
24:06 Generating access and secret keys
26:32 Server Actions for Handling Form Submission
29:21 UseFormState Hook for displaying form state
31:29 Installing AWS S3 Client
35:26 Testing File Upload
Website: www.coralnodes.com
---------------------------------------
Server providers:
Linode: www.coralnodes.com/go/linode/
DigitalOcean: www.coralnodes.com/go/digital...
-------------------------------------------------------------
Disclaimer:
This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate.
Disclosure:
This video and its description may contain affiliate links, which can earn us commission if someone purchases products using those links.

[@sidouglas]

Well done. Aws is a maze and you've explained this really well.

[@riveto_ir]

thanks for the detailed video 😘

[@magnuserikkeenrobot1117]

really good video. do you have more video on aws console?

[@milkboxshow1416]

is there a way to use useFormState with the pages router version of next.js? Or an appropriate modification that would allow file uploads using the pages router?

[@user-jn5sr3ed4s]

How did you manage to solve the CORS policy error when using localhost?

[@regilearn2138]

can u use lambda function for this. for next video

[@Slaat1]

isn't the roundtrip that you're doing, client -> server -> s3, instead of client -> s3 directly kind of an overhead?

[@Slaat1]

I mean in your case it does make sense because you don't want to expose any of the keys but it would require less network if you were to create a presigned url from the server, send it to the client and let the client upload the file directly. what do you think?

[@CodingReflections]

I did it this way to keep the aws credentials safe on the server. Instead if it was on the client, won't it get exposed to the client, even if it is a predesigned url?

[@impc-lx9gf]

@@CodingReflections nah, thats the whole concept of presigned url. i think you should refer it, the current method which you are describing is just wasting double bandwidth.

[@milkboxshow1416]

@@impc-lx9gf what's the practical difference? you need to hit the server either way to either get the credentials or a pre-signed url.

[@impc-lx9gf]

@@milkboxshow1416 there is big difference between uploading file to server then s3 and just hiting server for s3, any way you must be not in production so that's why you will not get it either way. Thanks 😊