DEV Community

Cover image for Deploy a Next.js App to AWS Amplify
Ali Spittel for AWS

Posted on • Originally published at welearncode.com on

Deploy a Next.js App to AWS Amplify

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"
},
Enter fullscreen mode Exit fullscreen mode

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.

  1. Create an AWS account if you don't already have one.

  2. Navigate to the Amplify Console

  3. Click on the orange connect app button.

  4. Choose GitHub in the From your existing code menu, and click continue

Amplify interface with different remotes

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

Amplify interface with name of repo

  1. The build settings will auto-populate, and so you can just click next on the Configure build settings
  2. 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!

The connect branch button on the AWS Amplify Console

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.

Enable previews in the AWS Amplify Console

Then, click Enable previews.

Enable pull request previews in aws amplify

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.

Discussion (17)

Collapse
marcostreng profile image
Marco Streng • Edited on

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?

Collapse
aspittel profile image
Ali Spittel Author

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

Collapse
marcostreng profile image
Marco Streng • Edited on

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.

Thread Thread
sohammondal profile image
Soham Mondal

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

Collapse
alacret profile image
Angel Lacret
Collapse
ianwijma profile image
Ian Wijma

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.

Collapse
aspittel profile image
Ali Spittel Author

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

Collapse
ninan_phillip profile image
Phillip Ninan

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

Collapse
aspittel profile image
Ali Spittel Author

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!

Collapse
ninan_phillip profile image
Phillip Ninan

I wish I could like this more than once! 😂

Thank you Ali!

Collapse
fwang profile image
Info Comment hidden by post author - thread only accessible via permalink
Frank Wang

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

Collapse
larsejaas profile image
Lars Ejaas

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!

Collapse
aspittel profile image
Ali Spittel Author

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

Collapse
larsejaas profile image
Lars Ejaas

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!

Collapse
luismanuel001 profile image
Luis Manuel

Any plans for supporting ISR in the near future?

Collapse
aspittel profile image
Ali Spittel Author

I've passed along your request to the team! A few other people have asked as well, so my guess would be yes :)

Collapse
roblescoulter profile image
Luis Robles

Hi!

Any idea why Next.js's Fast Refresh doesn't work when testing the application locally with Amplify?

Some comments have been hidden by the post's author - find out more