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!
For a statically generated Next.js app, you'll first need to edit your
package.json file. You'll need to change your
next build && next export instead of just
"dev": "next dev",
+ "build": "next build && next export",
"start": "next start"
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
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!
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
From your existing codemenu, and click continue
- Type in the name of your GitHub repo you just created (it should autofill!) and then click
- The build settings will auto-populate, and so you can just click
Configure build settings
Save and deploy.
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.
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.
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.
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.