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

# 將 SSR 功能新增至靜態 Next.js 應用程式
<a name="redeploy-ssg-to-ssr"></a>

您可以將 SSR 功能新增至使用 Amplify 部署的現有靜態 (SSG) Next.js 應用程式。在開始將 SSG 應用程式轉換為 SSR 的程序之前，請更新應用程式以使用 Next.js 第 12 版或更新版本，並新增 SSR 功能。然後，您將需要執行下列步驟。

1. 使用 AWS Command Line Interface 變更應用程式的平台類型。

1. 將服務角色新增至應用程式。

1. 在應用程式的建置設定中更新輸出目錄。

1. 更新應用程式`package.json`的檔案，以指出應用程式使用 SSR。

## 更新平台
<a name="update-platform"></a>

平台類型有三個有效值。SSG 應用程式設定為平台類型 `WEB`。使用 Next.js 第 11 版的 SSR 應用程式設定為平台類型 `WEB_DYNAMIC`。對於使用 Amplify 託管運算管理的 SSR 部署至 Next.js 12 或更新版本的應用程式，平台類型設定為 `WEB_COMPUTE`。

當您將應用程式部署為 SSG 應用程式時，Amplify 會將平台類型設定為 `WEB`。使用 AWS CLI 將應用程式的平台變更為 `WEB_COMPUTE`。開啟終端機視窗並輸入下列命令，使用您唯一的應用程式 ID 和區域更新紅色文字。

```
aws amplify update-app --app-id {{abcd1234}} --platform WEB_COMPUTE --region {{us-west-2}}
```

## 新增服務角色
<a name="add-service-role"></a>

服務角色是 Amplify 代表您呼叫其他 服務時擔任的 AWS Identity and Access Management (IAM) 角色。請依照下列步驟，將服務角色新增至已使用 Amplify 部署的 SSG 應用程式。

**新增服務角色**

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

1. 如果您尚未在 Amplify 帳戶中建立服務角色，請參閱[新增服務角色](amplify-service-role.md)以完成此先決條件步驟。

1. 選擇您要新增服務角色的靜態 Next.js 應用程式。

1. 在導覽窗格中，選擇**應用程式設定**，**一般**。

1. 在**應用程式詳細資訊**頁面上，選擇**編輯**

1. 針對**服務角色**，選擇現有服務角色的名稱，或您在步驟 2 中建立的服務角色名稱。

1. 選擇**儲存**。

## 更新建置設定
<a name="update-build-settings"></a>

使用 SSR 功能重新部署應用程式之前，您必須更新應用程式的建置設定，將輸出目錄設定為 `.next`。您可以在 Amplify 主控台或儲存庫中存放的 `amplify.yml` 檔案中編輯建置設定。如需詳細資訊，請參閱 [設定 Amplify 應用程式的建置設定](build-settings.md)。

以下是 設定為 之應用程式的建置設定範例`baseDirectory``.next`。

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

## 更新 package.json 檔案
<a name="update-package.json-file"></a>

新增服務角色並更新建置設定後，請更新應用程式`package.json`的檔案。如下列範例所示，將建置指令碼設定為 ，`"next build"`表示 Next.js 應用程式同時支援 SSG 和 SSR 頁面。

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

Amplify 會偵測儲存庫中`package.json`檔案的變更，並使用 SSR 功能重新部署應用程式。