How to deploy a static website to AWS S3 using nextjs

Question

I am still new to React and I started writing a static website using Nextjs. But when I want to deploy to AWS S3 I have some problems. I used to use webpack only and when I type yarn build I get a dist file and it is easy for me to just upload the content inside the dist file to the S3 bucket.

However after using Nextjs for SSR I found that after I build the project I get a .next file with cache, server, and static subfiles as well as BUILD_ID, build-manifest.json, react-loadable-manifest.json,records.json. I have no clue what I should upload to S3 and what those files mean.

It may be a silly question but I have already spent more than a day trying to find the solution.

You also need to use next export after building. nextjs.org/docs#static-html-export — HMilbradt
– HMilbradt, Commented Oct 20, 2019 at 4:00
in my package.json, "scripts": { "dev": "node index.js", "build": "next build", "start": "NODE_ENV=production node index.js" }, when I yarn export or next export.It just shows an error — Ken
– Ken, Commented Oct 20, 2019 at 4:03
S3 is a file hosting service. You cannot use SSR with it, and instead need to statically generate (see the link), or host on a server (EC2 for example) — HMilbradt
– HMilbradt, Commented Oct 20, 2019 at 4:05
I added nextjs framework in my old project which is already deployed in S3 so that's why I want to replace my old dist content in my S3 bucket. I have added "export": "npm run build && next export" in my package.json and type yarn export but there are no any html file — Ken
– Ken, Commented Oct 20, 2019 at 4:10
when I run the script yarn export ,It gives me ''Error: Cannot export when target is not server. err.sh/zeit/next.js/next-export-serverless'' — Ken
– Ken, Commented Oct 20, 2019 at 4:21

dubucha · Accepted Answer · 2020-06-19 07:37:26Z

1

You can change package.json as follows.

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

Then, you can run "yarn build". It will generate top-level directory /out in your project. Upload all contents in the folder by using the command for convenience.

aws s3 sync ./out s3://your-s3-bucket-name

Make sure you have set your bucket to serve static website and have the following bucket policy.

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

answered Jun 19, 2020 at 7:37

dubucha

1,08710 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

You don't have to open up the entire bucket. Add "--acl public-read" to the aws tool to make individual items public instead.

Ramakay · Accepted Answer · 2020-06-22 13:44:05Z

1

Original question is very old, if you arrived here using a search, and receive Error: Cannot export when target is not server - make sure you remove target target: 'serverless' from next.config.js

Otherwise, follow the answer above from @R.Cha https://stackoverflow.com/a/62465471/13749957 which summarizes the docs here and adds S3 specific steps - https://nextjs.org/docs/advanced-features/static-html-export

answered Jun 22, 2020 at 13:44

Ramakay

3,1631 gold badge9 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to deploy a static website to AWS S3 using nextjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related