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.

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

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

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!

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.