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