# Deploy a Next.js App to AWS Amplify

[AWS Amplify just announced server-side rendering deployment support for Next.js](https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html)! Here's a quick guide on how to deploy both an [SSR and an SSG](https://welearncode.com/ssr-vs-ssg/) Next.js app.

Note: if you're new to Next.js check out [this tutorial!](https://welearncode.com/beginners-guide-nextjs/)

## 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`.

```diff
"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](https://aws.amazon.com/premiumsupport/knowledge-center/create-and-activate-aws-account/) if you don't already have one.

2. Navigate to [the Amplify Console](https://console.aws.amazon.com/amplify/home)

3. Click on the orange `connect app` button.

4. Choose `GitHub` in the `From your existing code` menu, and click continue

![Amplify interface with different remotes](https://cdn.hashnode.com/res/hashnode/image/upload/v1621531368314/IZL4vNj2h.png)

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

![Amplify interface with name of repo](https://cdn.hashnode.com/res/hashnode/image/upload/v1621531371805/oRFth34EX.png)

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](https://aws.amazon.com/s3/pricing/) to store your app's static assets, then an [Amazon CloudFront](https://aws.amazon.com/cloudfront/pricing/) to serve your app itself, finally a [Lambda@Edge function](https://aws.amazon.com/lambda/pricing/) 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](console.aws.amazon.com/amplify/home) 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!

![The connect branch button on the AWS Amplify Console](https://cdn.hashnode.com/res/hashnode/image/upload/v1621531373950/vc9h9BEsw.png)

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

![Enable previews in the AWS Amplify Console](https://cdn.hashnode.com/res/hashnode/image/upload/v1621531375540/2jMRF6x9O.png)

Then, click `Enable previews`.

![Enable pull request previews in aws amplify](https://cdn.hashnode.com/res/hashnode/image/upload/v1621531376858/ZFkThjetP.png)

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