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 appbutton.Choose
GitHubin theFrom your existing codemenu, 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
nexton theConfigure 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)
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?
Hey, thanks for bubbling this up! The engineering team is checking into it and I'll let you know when I hear back!
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.
Yes, you're right. Downgrading Next.js to v11.1.3 and setting
webpack5: falsein next.config.js fixed the issue.github.com/aws-amplify/amplify-hos...
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.
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/...
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!!
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!
I wish I could like this more than once! 😂
Thank you Ali!
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-...
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!
Hey! Thanks for this feature request, I passed it on to the engineering and product teams!
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!
Any plans for supporting ISR in the near future?
I've passed along your request to the team! A few other people have asked as well, so my guess would be yes :)
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