將SSR功能新增至靜態 Next.js 應用程式 - AWS Amplify 託管
更新平台新增服務角色更新建置設定更新 package.json 檔案

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

將SSR功能新增至靜態 Next.js 應用程式

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

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

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

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

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

更新平台

平台類型有三個有效值。SSG 應用程式設定為平台類型 WEB。使用 Next.js 第 11 版SSR的應用程式設定為平台類型 WEB_DYNAMIC。對於使用 Amplify Hosting 運算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

新增服務角色

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

新增服務角色

  1. 登入 AWS Management Console 並開啟 Amplify 主控台。

  2. 如果您尚未在 Amplify 帳戶中建立服務角色，請參閱新增服務角色以完成此先決條件步驟。

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

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

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

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

  7. 選擇 Save (儲存)。

更新建置設定

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

以下是 設定為 的應用程式建置設定範例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 檔案

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

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

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