기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

정적 Next.js 앱에 SSR 기능 추가

Amplify와 함께 배포된 기존 정적 (SSG) Next.js 앱에 SSR 기능을 추가할 수 있습니다. SSG 앱을 로 변환하는 프로세스를 시작하기 전에 Next.js 버전 12 이상을 사용하도록 앱을 SSR업데이트하고 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 앱에 서비스 역할을 추가합니다.

빌드 설정 업데이트

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 기능을 사용하여 앱을 재배포합니다.