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

# 정적 Next.js 앱에 SSR 기능 추가
<a name="redeploy-ssg-to-ssr"></a>

Amplify를 통해 배포된 기존 정적(SSG) Next.js 앱에 SSR 기능을 추가할 수 있습니다. SSG 앱을 SSR로 변환하는 프로세스를 시작하기 전에, Next.js 12 또는 그 이후 버전을 사용하도록 앱을 업데이트하고 SSR 기능을 추가합니다. 그런 다음, 다음 단계를 수행해야 합니다.

1.  AWS Command Line Interface 를 사용하여 앱의 플랫폼 유형을 변경합니다.

1. 앱에 서비스 역할을 추가합니다.

1. 앱의 빌드 설정에서 출력 디렉터리를 업데이트합니다.

1. 앱이 SSR을 사용한다는 것을 나타내도록 앱의 `package.json` 파일을 업데이트합니다.

## 플랫폼 업데이트
<a name="update-platform"></a>

플랫폼 유형에는 세 가지 유효한 값이 있습니다. 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}}
```

## 서비스 역할 추가
<a name="add-service-role"></a>

서비스 역할은 Amplify가 사용자를 대신하여 다른 서비스를 호출할 때 수임하는 AWS Identity and Access Management (IAM) 역할입니다. Amplify를 통해 이미 배포된 SSG 앱에 서비스 역할을 추가하려면 다음 단계를 따릅니다.

**서비스 역할을 추가하려면**

1. 에 로그인 AWS Management Console 하고 [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.js 앱이 SSG 및 SSR 페이지를 모두 지원한다는 것을 나타내도록 빌드 스크립트를 `"next build"`로 설정합니다.

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

Amplify는 리포지토리의 `package.json` 파일 변경을 감지하고 SSR 기능을 사용하여 앱을 재배포합니다.