Deploying a Next.js app with Amplify - AWS Amplify Hosting

Deploying a Next.js app with Amplify

By default, Amplify deploys new SSR apps using Amplify Hosting's compute service with support for Next.js 12, 13, and 14. Amplify Hosting compute fully manages the resources required to deploy an SSR app. SSR apps in your Amplify account that you deployed before November 17, 2022 are using the Classic (Next.js 11 only) SSR provider.

We strongly recommend that you migrate apps using Classic (Next.js 11 only) SSR to the Amplify Hosting compute SSR provider. Amplify doesn't perform automatic migrations for you. You must manually migrate your app and then initiate a new build to complete the update. For instructions, see Migrating a Next.js 11 app to Amplify Hosting compute.

Use the following instructions to deploy a new Next.js app.

To deploy a Next.js app to Amplify using the Amplify Hosting compute SSR provider
  1. Sign in to the AWS Management Console and open the Amplify console.

  2. On the All apps page, choose Create new app.

  3. On the Start building with Amplify page, choose your Git repository provider, then choose Next.

  4. On the Add repository branch page, do the following:

    1. Select the name of the repository to connect.

    2. Select the name of the repository branch to connect.

    3. Choose Next.

  5. The app requires an IAM service role that Amplify assumes when calling other services on your behalf. You can either allow Amplify Hosting compute to automatically create a service role for you or you can specify a role that you have created.

    • To allow Amplify to automatically create a role and attach it to your app:

      1. Choose Create and use a new service role.

    • To attach a service role that you previously created:

      1. Choose Use an existing service role.

      2. Select the role to use from the list.

  6. Choose Next.

  7. On the Review page, choose Save and deploy.

Package.json file settings

When you deploy a Next.js app, Amplify inspects the app's build script in the package.json file to detect whether the app is SSR or SSG.

The following is an example of the build script for a Next.js SSR app. The build script "next build" indicates that the app supports both SSG and SSR pages.

"scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

The following is an example of the build script for a Next.js SSG app. The build script "next build && next export" indicates that the app supports only SSG pages.

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

Amplify build settings

After inspecting your app's package.json file to determine whether you are deploying an SSG or SSR app, Amplify checks the build settings for the app. You can save build settings in the Amplify console or in an amplify.yml file in the root of your repository. For more information, see Configuring build settings.

If Amplify detects that you are deploying a Next.js SSR app, and no amplify.yml file is present, it generates a buildspec for the app and sets baseDirectory to .next. If you are deploying an app where an amplify.yml file is present, the build settings in the file override any build settings in the console. Therefore, you must manually set the baseDirectory to .next in the file.

The following is an example of the build settings for an app where baseDirectory is set to .next. This indicates that the build artifacts are for a Next.js app that supports SSG and SSR pages.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/*

If Amplify detects that you are deploying an SSG app, it generates a buildspec for the app and sets baseDirectory to out. If you are deploying an app where an amplify.yml file is present, you must manually set the baseDirectory to out in the file.

The following is an example of the build settings for an app where baseDirectory is set to out. This indicates that the build artifacts are for a Next.js app that supports only SSG pages.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/*