Next.js + AWS S3 Upload

DISCLAIMER

If you follow this tutorial, you might end up paying for AWS services.

👋 Introduction

Let's make a simple Next.js application allowing you to upload photos to an Amazon Web Services S3 storage bucket. This tutorial is focused on how to create an IAM user and a storage bucket on Amazon Web Services, so I have included all the code on my nextjs-aws-s3 github repo. It's Next.js in Typescript and I have used TailwindCSS for styling.

Before we start, please find below some definitions so we are all under the same umbrella.
-> Next.js is an open source framework that allows you to create full-stack web applications.
-> Amazon S3 is an object storage built to retrieve any amount of data from anywhere in the world.
-> AWS Identity and Access Management (IAM) securely manage identities and access to AWS services and resources.
-> TailwindCSS is a utility-first CSS framework packed with classes.

🚀 Getting started

• You need to sign up for a AWS account and - at the time that I'm writing this tutorial - you will be eligible for amazon's free tier. This is simply a period that you can use some of amazon web services' for free with some limitations. Please read more about it online.

• You need to clone my repo,

git clone git@github.com:imevanc/nextjs-aws-s3.git

create a dot env file in the src folder - where you will store the aws environment variables - and run

npm install

• Given that you're all setup with the above steps, you will need to create a new IAM user on AWS. You have to search for IAM on AWS and navigate to the Users tab, please find a screenshot of this page below.

• Hit the Add users button and you will be redirected to a 3 steps process. You need to specify the user's details on step 1; please use your preferred name and select the "Provide user access to the AWS Management Console - optional" checkbox. When you will be prompted to respond to "Are you providing console access to a person?" please select "I want to create an IAM user". I have attached a screenshot of this step below, when you're ready please click the Next button.

• The second step of the IAM user's creation allows you to set policy permissions to this user. You need to select "Attach policies directly" and search for "AmazonS3FullAccess", please select the checkbox of this policy before you continue. Please see the image below for reference and when you're ready hit the next button.

• The third step requests you to review your IAM user and by clicking next, you create it.

• The final step gives you the Access Key ID and the Secret Access Key. You will need to save these two keys for the IAM User, because they will be used for programmatic access in the API Route. Please update your dot env file with these credentials as follows:
  

AWS_ACCESS_KEY_ID=....
AWS_SECRET_ACCESS_KEY=....

• You need to create an S3 bucket for storing the image. Search on AWS for S3 and hit the create bucket button as you see below.

• Please choose your preferred bucket name and under the Object Ownership tab, select "ACLs enabled" & "Bucket owner preferred", as you can see below.

• Important Note: Your bucket needs to be created in the same region as your IAM user.

• Remember to unselect the block all public access, otherwise your bucket won't be publicly available and your IAM user will receive 403 unauthorized.

• You need to bring up your dot env file and update the name and the region of the bucket in it.

AWS_REGION=...
AWS_BUCKET_NAME=...

• You can now hit the create bucket and you are almost ready to go. The last step is to update the CORS; please open your bucket, navigate to the permissions tab and scroll down until you reach the Cross-origin resource sharing (CORS) section. Please click the edit button and paste the following code in it. Save it and you're ready to run the application!

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

• You can find more information about how to run the demo on my nextjs-aws-s3 github repo

🏁 Conclusion

We did it! We created an IAM user an S3 bucket and we have managed to connect them to a Next.js application! If you have any question don't hesitate to reach out to me, cheers!
Github: @imevanc