How to deploy static Next.js to AWS S3

Next.js this fabulous open source framework based on React allows you to manage an entire application! Both front-end and back-end, perfect for a javascript developer and all this with high performance, but if you arrive on this article, you must surely know it, if not, hop, little link to the documentation

Table of contents

For this tutorial Node.js is required.

• Create Next.js app
• Setup AWS S3 butcket static website
• Publish Next.js Application to S3 bucket

Create Next.js app

As recommended by Next.js we will use create-next-app for create a project.
There are two possibilities to initialize a project:

npx create-next-app
# or
yarn create next-app

Then follow the instructions and finally go to our project and start it

cd my-project && yarn dev

The server starts up on port 3000, so let's go to http://localhost:3000

Congratulations 🎉 ! now let's deploy this static Next.js application to aws S3 bucket

Setup AWS S3 butcket static website

To continue the tutorial, we are going to move on to the aws console, for this section I am assuming you already have an AWS account with access to the management console.

1. Access your management console
2. on Find Services, search S3

1. click on Create bucket

1. enter name your Bucket name (e.g: my-awesome-nextjs-app), it must be unique

1. enable access public and valide by unchecking Block all public access and check the acknowledgment of receipt, you can create the bucket

1. on list, select your bucket

1. go to properties > Static website hosting, select Enable static website hosting and Host as static website on index document and Error document you can ad index.html, Save changes

1. Now go to Permissions > Bucket policy edit and add this, change Ressource with your bucket name

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

Now you're ready to export the Next.js app and add this to yout bucket 🎉

Publish Next.js Application to S3 bucket

To complete this tutorial, we're going to export our Next.js app using package.json and import the exported app into our S3 bucket.

To start, we will have to modify the file package.json to change a build script :

    "build": "next build && next export"

This build script build the app and generate all the static files (to folder out) necessary to run the application.

Go to your S3 Bucket and upload the contents of the out folder

Click on Upload, after loading you can exit

To access our application, go to Properties> Static website hosting where the bucket link is displayed

let's go to this link :

🎉 Congratulations 🎉 We have uploaded our static Next.js app to aws S3 bucket

All you have to do is code your static application, export it and add it to your bucket

Conclusion

As you can see it is very easy to host a static Next.js app on aws, in the next article i think we will see how to work with github actions to use continuous integration on our Next.js app, so every merge on branch main your application will be updated on your bucket.

Thank you for following this article, do not hesitate to give me your feedback and if you liked it share it and follow me on Twitter