本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 將 Next.js SSR 應用程式部署至 Amplify
<a name="deploy-nextjs-app"></a>

根據預設，Amplify 會使用 Amplify Hosting 的運算服務部署新的 SSR 應用程式，並支援 Next.js 版本 12 到 15。Amplify 託管運算可完整管理部署 SSR 應用程式所需的資源。您在 2022 年 11 月 17 日之前部署的 Amplify 帳戶中的 SSR 應用程式正在使用 Classic （僅限 Next.js 11) SSR 供應商。

我們強烈建議您使用 Classic （僅限 Next.js 11) SSR 將應用程式遷移至 Amplify 託管運算 SSR 供應商。Amplify 不會為您執行自動遷移。您必須手動遷移應用程式，然後啟動新建置以完成更新。如需說明，請參閱[將 Next.js 11 SSR 應用程式遷移至 Amplify 託管運算](update-app-nextjs-version.md)。

使用以下指示來部署新的 Next.js SSR 應用程式。

**使用 Amplify 託管運算 SSR 供應商將 SSR 應用程式部署至 Amplify**

1. 登入 AWS 管理主控台 並開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。

1. **在所有應用程式**頁面上，選擇**建立新應用程式**。

1. 在**開始使用 Amplify 建置**頁面上，選擇您的 Git 儲存庫提供者，然後選擇**下一步**。

1. 在**新增儲存庫分支**頁面上，執行下列動作：

   1. 在**最近更新的儲存庫**清單中，選取要連線的儲存庫名稱。

   1. 在**分支**清單中，選取要連線的儲存庫分支名稱。

   1. 選擇**下一步**。

1. 應用程式需要 Amplify 代表您呼叫其他 服務時擔任的 IAM 服務角色。您可以允許 Amplify 託管運算自動為您建立服務角色，也可以指定您已建立的角色。
   + 若要允許 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"
},
```

## 擴增 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`檔案存在，它會為應用程式產生 buildspec，並將 `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 應用程式的建置設定
<a name="build-setting-detection-ssg-13"></a>

如果 Amplify 偵測到您正在部署 Next.js 13 或更早版本的 SSG 應用程式，它會為應用程式產生建置規格，並將 `baseDirectory`設定為 `out`。如果您要部署存在 `amplify.yml` 檔案的應用程式，則必須`out`在 檔案中手動`baseDirectory`將 設定為 。`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 版`output: 'export'`中，`next export`命令已棄用，並在 `next.config.js` 檔案中取代為 ，以啟用靜態匯出。如果您在主控台中部署僅限 Next.js 14 SSG 的應用程式，Amplify 會為應用程式產生建置規格，並將 `baseDirectory`設定為 `.next`。如果您要部署存在 `amplify.yml` 檔案的應用程式，您必須在 `.next` 檔案中手動`baseDirectory`將 設定為 。這是 Amplify 用於支援 SSG 和 SSR 頁面之 Next.js `WEB_COMPUTE`應用程式的相同`baseDirectory`設定。

以下是將 `baseDirectory`設為 之僅限 Next.js 14 SSG 應用程式的建置設定範例。 `.next`

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