Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Menambahkan fungsionalitas SSR ke aplikasi statis Next.js
<a name="redeploy-ssg-to-ssr"></a>

Anda dapat menambahkan fungsionalitas SSR ke Next.js aplikasi statis (SSG) yang sudah ada yang digunakan dengan Amplify. Sebelum Anda memulai proses konversi aplikasi SSG Anda ke SSR, perbarui aplikasi untuk menggunakan Next.js versi 12 atau yang lebih baru dan tambahkan fungsionalitas SSR. Maka Anda perlu melakukan langkah-langkah berikut.

1. Gunakan AWS Command Line Interface untuk mengubah jenis platform aplikasi.

1. Tambahkan peran layanan ke aplikasi.

1. Perbarui direktori keluaran di setelan build aplikasi.

1. Perbarui `package.json` file aplikasi untuk menunjukkan bahwa aplikasi menggunakan SSR.

## Memperbarui platform
<a name="update-platform"></a>

Ada tiga nilai yang valid untuk tipe platform. Aplikasi SSG diatur ke jenis `WEB` platform. Aplikasi SSR yang menggunakan Next.js versi 11 diatur ke jenis `WEB_DYNAMIC` platform. Untuk aplikasi yang diterapkan ke Next.js 12 atau lebih baru menggunakan SSR yang dikelola oleh komputasi Amplify Hosting, jenis platform disetel ke. `WEB_COMPUTE`

Saat Anda menerapkan aplikasi sebagai aplikasi SSG, Amplify menyetel jenis platform ke. `WEB` Gunakan AWS CLI untuk mengubah platform aplikasi Anda`WEB_COMPUTE`. Buka jendela terminal dan masukkan perintah berikut, perbarui teks berwarna merah dengan id aplikasi dan Wilayah unik Anda.

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

## Menambahkan peran layanan
<a name="add-service-role"></a>

Peran layanan adalah peran AWS Identity and Access Management (IAM) yang diasumsikan Amplify saat memanggil layanan lain atas nama Anda. Ikuti langkah-langkah berikut untuk menambahkan peran layanan ke aplikasi SSG yang sudah digunakan dengan Amplify.

**Cara Menambahkan peran layanan**

1. Masuk ke Konsol Manajemen AWS dan buka konsol [Amplify](https://console.aws.amazon.com/amplify/).

1. Jika Anda belum membuat peran layanan di akun Amplify, lihat [Menambahkan peran layanan untuk menyelesaikan langkah](amplify-service-role.md) prasyarat ini.

1. Pilih Next.js aplikasi statis yang ingin Anda tambahkan peran layanan.

1. Di panel navigasi, pilih **Pengaturan aplikasi**, **Umum**.

1. Di halaman **Detail aplikasi**, pilih **Edit**

1. Untuk **Peran layanan**, pilih nama peran layanan yang ada atau nama peran layanan yang Anda buat di langkah 2.

1. Pilih **Simpan**.

## Memperbarui setelan build
<a name="update-build-settings"></a>

Sebelum men-deploy ulang aplikasi dengan fungsionalitas SSR, Anda harus memperbarui pengaturan build untuk aplikasi guna mengatur direktori output ke `.next`. Anda dapat mengedit pengaturan build di konsol Amplify atau di file `amplify.yml` yang disimpan di repo Anda. Untuk informasi selengkapnya, lihat [Mengonfigurasi setelan build untuk aplikasi Amplify](build-settings.md).

Berikut contoh pengaturan build untuk aplikasi dengan `baseDirectory` diatur ke `.next`.

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

## Memperbarui file package.json
<a name="update-package.json-file"></a>

Setelah Anda menambahkan peran layanan dan memperbarui pengaturan build, perbarui file `package.json` aplikasi. Seperti pada contoh berikut, setel skrip build `"next build"` untuk menunjukkan bahwa Next.js aplikasi mendukung halaman SSG dan SSR.

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

Amplify mendeteksi perubahan pada file `package.json` di repo Anda dan men-deploy ulang aplikasi dengan fungsionalitas SSR.