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 Next.js statis
<a name="redeploy-ssg-to-ssr"></a>

Anda dapat menambahkan fungsionalitas SSR ke aplikasi Next.js statis (SSG) yang 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 di-deploy ke Next.js 12 atau yang 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 aplikasi Next.js statis tempat peran layanan akan ditambahkan.

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 pengaturan 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 dalam contoh berikut, atur skrip build ke `"next build"` untuk menunjukkan bahwa aplikasi Next.js 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.