本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 将 Next.js SSR 应用程序部署到 Amplify
<a name="deploy-nextjs-app"></a>

默认情况下，Amplify 使用 Amplify Hosting 的计算服务（支持 Next.js 版本 12 至 15）来部署新 SSR 应用程序。Amplify Hosting 计算可完全管理部署 SSR 应用程序所需的资源。您的 Amplify 账户中在 2022 年 11 月 17 日之前部署的 SSR 应用程序使用的是 Classic（仅限 Next.js 11）SSR 提供商。

我们强烈建议您将使用 Classic（仅限 Next.js 11）SSR 的应用程序迁移至 Amplify Hosting 计算 SSR 提供商。Amplify 不会自动为您执行迁移。您必须手动迁移应用程序，然后启动新版本完成更新。有关说明，请参阅[将 Next.js 11 SSR 应用程序迁移至 Amplify Hosting 计算](update-app-nextjs-version.md)。

请按照以下说明操作以部署新的 Next.js SSR 应用程序。

**使用 Amplify Hosting 计算 SSR 提供商将 SSR 应用程序部署到 Amplify**

1. 登录 AWS 管理控制台 并打开 [Amplify](https://console.aws.amazon.com/amplify/) 控制台。

1. 在**所有应用程序**页面中，选择**创建新应用程序**。

1. 在**开始使用 Amplify 进行构建**页面中选择您的 Git 存储库提供商，然后选择**下一步**。

1. 在**添加存储库分支**页面上，执行以下操作：

   1. 在**最近更新的存储库**列表中，选择要连接的存储库的名称。

   1. 在**分支**列表中，选择要连接的存储库分支的名称。

   1. 选择**下一步**。

1. 该应用程序需要一个 IAM 服务角色，Amplify 在代表您调用其他服务时会代入该角色。您可以允许 Amplify Hosting 计算自动为您创建服务角色，也可以指定您已创建的角色。
   + 允许 Amplify 自动创建角色并将其附加到您的应用程序的方法：

     1. 请选择**创建和使用新的服务角色**。
   + 附加您之前创建的服务角色的方法：

     1. 选择**使用现有服务角色**。

     1. 从列表中选择需要使用的角色。

1. 选择**下一步**。

1. 在**查看**页面上，选择**保存并部署**。

## Package.json 文件设置
<a name="package.json-settings"></a>

部署 Next.js 应用程序时，Amplify 会在 `package.json` 文件中检查该应用程序的构建脚本，以确定应用程序类型。

以下是适用于 Next.js 应用程序的构建脚本示例。构建脚本 `"next build"` 表示该应用程序同时支持 SSG 和 SSR 页面。此构建脚本也用于仅使用 Next.js 14 或更高版本的 SSG 应用程序。

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

以下是适用于 Next.js 13 或之前版本的 SSG 应用程序的构建脚本示例。构建脚本 `"next build && next export"` 表明该应用程序仅支持 SSG 页面。

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

## Amplify Next.js SSR 应用程序的构建设置
<a name="build-setting-detection"></a>

在检查应用程序的 `package.json` 文件后，Amplify 会检查该应用程序的构建设置。您可以将构建设置保存在 Amplify 控制台中，也可以保存在存储库根目录下的 `amplify.yml` 文件中。有关更多信息，请参阅 [配置 Amplify 应用程序的构建设置](build-settings.md)。

如果 Amplify 检测到您部署的是 Next.js SSR 应用程序，但不存在任何 `amplify.yml` 文件，则它会为该应用程序生成构建规范并将 `baseDirectory` 设置为 `.next`。如果您部署的是存在 `amplify.yml` 文件的应用程序，则该文件中的构建设置会覆盖控制台中的所有构建设置。因此，您必须在文件中将 `baseDirectory` 手动设置为 `.next`。

以下是将 `baseDirectory` 设置为 `.next` 的应用程序的构建设置示例。这表明构建构件适用于支持 SSG 和 SSR 页面的 Next.js 应用程序。

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

## 适用于 Next.js 13 或之前版本的 SSG 应用程序的 Amplify 构建设置
<a name="build-setting-detection-ssg-13"></a>

如果 Amplify 检测到您在部署 Next.js 13 或之前版本的 SSG 应用程序，则会为该应用程序生成构建规范并将 `baseDirectory` 设置为 `out`。如果您部署的是存在 `amplify.yml` 文件的应用程序，则必须在文件中将 `baseDirectory` 手动设置为 `out`。`out` 目录是 Next.js 为存储导出的静态资源而创建的默认文件夹。配置应用程序的编译规范设置时，请更改 `baseDirectory` 文件夹的名称，以匹配您的应用程序配置。

以下是应用程序构建设置的示例，其中 `baseDirectory` 设置为 `out`，指明该构建构件适用于仅支持 SSG 页面的 Next.js 13 或之前版本的应用程序。

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

## Next.js 14 或更高版本 SSG 应用程序的 Amplify 构建设置
<a name="build-setting-detection-ssg-14"></a>

在 Next.js 14 版本中，`next export` 命令已被弃用，并替换为 `next.config.js` 文件中的 `output: 'export'`，以启用静态导出。如果您在控制台部署仅限 Next.js 14 SSG 的应用程序，Amplify 会为该应用程序生成规范并将 `baseDirectory` 设置为 `.next`。如果您部署的是存在 `amplify.yml` 文件的应用程序，则必须在文件中将 `baseDirectory` 手动设置为 `.next`。这与 Amplify 为同时支持 SSG 和 SSR 页面的 Next.js `WEB_COMPUTE` 应用程序使用的 `baseDirectory` 设置相同。

以下是适用于仅限 Next.js 14 SSG 的应用程序构建设置的示例，其中的 `baseDirectory`设置为 `.next`。

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