Next.js + AWS S3 Upload
Tags: javascript, typescript, nextjs, webdev
Published: 2023-04-19 22:05:19

## 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](https://github.com/imevanc/nextjs-aws-s3). 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](https://nextjs.org/) is an open source framework that allows you to create **full-stack web applications**. 
-> [Amazon S3](https://aws.amazon.com/s3/) is an object storage built to retrieve any amount of data from anywhere in the world.
-> [AWS Identity and Access Management (IAM)](https://aws.amazon.com/iam/) securely manage identities and access to AWS services and resources.
-> [TailwindCSS](https://tailwindcss.com/) 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.


![IAM Users Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gic719xd3390nhfa8bi.png)

- 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.


![Specify User's details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo08g0iavheujk2gxjue.png)

- 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.


![Set Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og0zhaitwkt6g7zpkvqm.png)

- 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.


![S3 Create Bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggguvxn0u4paoqvrnj63.png)

- 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.

![S3 Object Ownership](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ntz3ov0933dcg03u6ve.png)

- Remember to unselect the **block all public access**, otherwise your bucket won't be publicly available and your IAM user will receive _403 unauthorized_. 

![S3 Bucket Access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zek5pfdnvvpd1mbpm9td.png)

- 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](https://github.com/imevanc/nextjs-aws-s3)


## 🏁 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](https://github.com/imevanc)