Ali Spittel for AWS

Posted on May 19, 2021 • Originally published at welearncode.com on May 19, 2021

Deploy a Next.js App to AWS Amplify

#aws #javascript #react #nextjs

June 27, 2024: This blog post uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying out Gen 2!

AWS Amplify just announced server-side rendering deployment support for Next.js! Here's a quick guide on how to deploy both an SSR and an SSG Next.js app.

Note: if you're new to Next.js check out this tutorial!

Please note that I work as a Developer Advocate on the AWS Amplify team, if you have any feedback or questions about it, please reach out to me or ask on our discord - discord.gg/amplify!

SSG

For a statically generated Next.js app, you'll first need to edit your package.json file. You'll need to change your build to next build && next export instead of just next build.

"scripts": {
  "dev": "next dev",
+ "build": "next build && next export",
  "start": "next start"
},

SSR

You don't need to change anything in your package.json for a server-side rendered app! Just keep the one that was generated by create-next-app.

Hybrid SSG + SSR

If you have an app with both SSR and SSG pages, also keep the default package.json, same as a fully SSR app!

For Both

Then, create a repository on your git provider of choice, and push your code to it.

Create an AWS account if you don't already have one.
Navigate to the Amplify Console
Click on the orange connect app button.
Choose GitHub in the From your existing code menu, and click continue

Type in the name of your GitHub repo you just created (it should autofill!) and then click next

The build settings will auto-populate, and so you can just click next on the Configure build settings
Click Save and deploy.

Pricing

Behind the scenes, Amplify creates AWS resources used to deploy your app -- first an Amazon S3 bucket to store your app's static assets, then an Amazon CloudFront to serve your app itself, finally a Lambda@Edge function to SSR pages. The links to each service in this paragraph leads to info about the pricing for it.

Multi-branch Deployments

In order to deploy multiple branches to AWS Amplify, you can click the orange "Connect branch" button on the Amplify Console page for your app. So, if you want to test deployments of features before they go live to the main branch, you can do so in clicks!

Pull Request Previews

You can also enable automatic pull request preview deployments. This will enable Amplify to deploy a preview of each pull request to a project so that you can click a link and see what the pull request does to the site!

First click on previews on the left side bar.

Then, click Enable previews.

Add a Custom Domain

You can also connect your domain name to your site by visiting Domain management and then add domain -- you'll see instructions for different domain providers or be able to buy one through Amazon Route53.

Conclusion

These are just some of the things you can do when you deploy an app to AWS Amplify Hosting! There are also ways to add testing, monitoring, custom headers, access control and more. I hope this guide was helpful for those of you looking to deploy a Next.js app to Amplify.

Top comments (17)

Marco Streng • May 21 '21 • Edited

Great article, thanks!

I've just created a new app from the Next.js starter and added a page with some server-side data fetching (SSR).
Build and deployment are running successfully. Amplify detects the framework correct with "Next.js SSR". Also the Lambda@Edge exists after the deployment. But there is no trigger connected as far as I can see.

But when I navigate to the SSR Page in the browser I always receive a "503 ERROR
The request could not be satisfied."

Maybe anyone got an idea?

Ali Spittel • May 24 '21

Hey, thanks for bubbling this up! The engineering team is checking into it and I'll let you know when I hear back!

Marco Streng • May 31 '21 • Edited

After some investigation I found out that I have to set webpack to version 4 in my next.config.js.
The latest Next.js uses webpack 5 as default which is not working with AWS Amplify Hosting right now.

Soham Mondal • Feb 9 '22

Yes, you're right. Downgrading Next.js to v11.1.3 and setting webpack5: false in next.config.js fixed the issue.

Angel Lacret • Apr 1 '22

github.com/aws-amplify/amplify-hos...

Ian Wijma • May 20 '21

I've had issue with prediction not working in the NextJS api routes. Where in the end I used LAMDA functions instead of API routes. I also number into other hurdles with Amplify. Love the idea. But not 100% sure about using it in my next big project.

Ali Spittel • May 20 '21

Hey! Thanks for the reply -- I just chatted with the engineers and for now SSR only works with Data and Auth not predictions yet. It could be a good thing to create an issue for to show the team you'd be interested in that as a feature! github.com/aws-amplify/amplify-js/...

Phillip Ninan • May 21 '21

Great read!

I just followed this and got a demo app deployed. It may be worth noting that you need to add a role to the app. I created a demo without one and it didn't seem to work. It said it was deployed, but the link did not work and I did not see an S3 bucket created.

I created a second one and created a new role on the create app screen and it worked!

Unfortunately, it looks like the Image component is not working. I'm pretty new to Next.js and I'm using SSR. I'm not sure if that is something that's not supported? 🤔

Thank you!!

Ali Spittel • May 24 '21

Hey! Thanks for the feedback, the Image component was Next 10, and we're supporting the Next 9 features for now. Have let the product and engineering teams know that this feature is requested though!

Phillip Ninan • May 24 '21

I wish I could like this more than once! 😂

Thank you Ali!

Comment hidden by post author - thread only accessible via permalink

Frank Wang • Sep 22 '21

Hey Ali, great article.

We also receive a lot of requests in the SST community for deploying Next.js apps to AWS. And I just wanted to share that we created a SST construct (backed by CDK) to help with building and deploying Next.js apps to your AWS account. It uses a similar architecture behind the scene S3, CloudFront, Lambda@Edge, and Route53 for domains. Next.js 11 compatible with ISR and image optimization support.

Here's an example serverless-stack.com/examples/how-...

Lars Ejaas • May 20 '21

It would be nice with some level of rollback functionality like Netlify. It just gives you so much mire peace in mind when updating a page. Otherwise AWS Amplify looks great!

Ali Spittel • May 20 '21

Hey! Thanks for this feature request, I passed it on to the engineering and product teams!

Lars Ejaas • May 20 '21

Thanks Ali. Didn't realize you actually work at AWS until now! But I really liked the article! I am still short of my first project on AWS but Amplify really looks great!