June 27, 2024: This blog post uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying outGen 2!

AWS Amplify just announced server-side rendering deployment support for Next.js! Here's a quick guide on how to deploy both anSSR and an SSG Next.js app.

Note: if you're new to Next.js check outthis 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 yourpackage.json file. You'll need to change yourbuild tonext build && next export instead of justnext build.

"scripts": {  "dev": "next dev",+ "build": "next build && next export",  "start": "next start"},

SSR

You don't need to change anything in yourpackage.json for a server-side rendered app! Just keep the one that was generated bycreate-next-app.

Hybrid SSG + SSR

If you have an app with both SSR and SSG pages, also keep the defaultpackage.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 tothe Amplify Console

3. Click on the orangeconnect app button.

4. ChooseGitHub in theFrom your existing code menu, and click continue

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

1. The build settings will auto-populate, and so you can just clicknext on theConfigure build settings
2. ClickSave and deploy.

Pricing

Behind the scenes, Amplify creates AWS resources used to deploy your app -- first anAmazon S3 bucket to store your app's static assets, then anAmazon CloudFront to serve your app itself, finally aLambda@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 theAmplify Console page for your app. So, if you want to test deployments of features before they go live to themain 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 onpreviews on the left side bar.

Then, clickEnable previews.

Add a Custom Domain

You can also connect your domain name to your site by visitingDomain management and thenadd 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.