Next.Js 14 – AWS S3 Image Upload

By Raddy in NextJs · 3rd November 2023

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.

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

Author

Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]

Next Post in Category