Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Menerapkan aplikasi SSR Next.js untuk Amplify
Secara default, Amplify menyebarkan aplikasi SSR baru menggunakan layanan komputasi Amplify Hosting dengan dukungan untuk Next.js versi 12 hingga 15. Amplify Hosting compute sepenuhnya mengelola sumber daya yang diperlukan untuk menerapkan aplikasi SSR. Aplikasi SSR di akun Amplify yang Anda terapkan sebelum 17 November 2022 menggunakan penyedia SSR Klasik (khusus Next.js 11).
Kami sangat menyarankan Anda memigrasikan aplikasi menggunakan SSR Klasik (hanya Next.js 11) ke penyedia SSR komputasi Amplify Hosting. Amplify tidak melakukan migrasi otomatis untuk Anda. Anda harus memigrasikan aplikasi secara manual dan kemudian memulai build baru untuk menyelesaikan pembaruan. Untuk petunjuk, lihat [Migrasi aplikasi SSR Next.js 11 ke komputasi Amplify Hosting](update-app-nextjs-version.md).
Gunakan petunjuk berikut untuk menerapkan aplikasi SSR Next.js baru.
**Untuk menerapkan aplikasi SSR ke Amplify menggunakan penyedia SSR komputasi Amplify Hosting**
1. Masuk ke Konsol Manajemen AWS dan buka konsol [Amplify](https://console.aws.amazon.com/amplify/).
1. Pada halaman **Semua aplikasi**, pilih **Buat aplikasi baru**.
1. **Pada halaman **Mulai membangun dengan Amplify**, pilih penyedia repositori Git Anda, lalu pilih Berikutnya.**
1. Di halaman **Tambahkan cabang repositori**, lakukan langkah berikut:
1. Dalam daftar **repositori yang baru diperbarui**, pilih nama repositori yang akan dihubungkan.
1. Dalam daftar **Branch**, pilih nama cabang repositori untuk terhubung.
1. Pilih **Berikutnya**.
1. Aplikasi ini memerlukan peran layanan IAM yang diasumsikan Amplify saat memanggil layanan lain atas nama Anda. Anda dapat mengizinkan komputasi Amplify Hosting untuk secara otomatis membuat peran layanan untuk Anda atau Anda dapat menentukan peran yang telah Anda buat.
+ Untuk mengizinkan Amplify membuat peran secara otomatis dan melampirkannya ke aplikasi Anda:
1. Pilih **Buat dan gunakan peran layanan baru**.
+ Untuk melampirkan peran layanan yang sebelumnya Anda buat:
1. Pilih **Gunakan peran layanan yang ada**.
1. Pilih peran yang akan digunakan dari daftar.
1. Pilih **Berikutnya**.
1. Di halaman **Tinjauan**, pilih **Simpan dan deploy**.
## Pengaturan file Package.json
Saat Anda menerapkan aplikasi Next.js, Amplify akan memeriksa skrip build aplikasi dalam `package.json` file untuk menentukan jenis aplikasi.
Berikut ini adalah contoh skrip build untuk aplikasi Next.js. Skrip build `"next build"` menunjukkan bahwa aplikasi mendukung halaman SSG dan SSR. Skrip build ini juga digunakan untuk aplikasi SSG Next.js 14 atau yang lebih baru.
```
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
```
Berikut ini adalah contoh skrip build untuk Next.js 13 atau aplikasi SSG sebelumnya. Skrip build `"next build && next export"` menunjukkan bahwa aplikasi mendukung halaman SSG saja.
```
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start"
},
```
## Amplify pengaturan build untuk aplikasi SSR Next.js
Setelah memeriksa `package.json` file aplikasi Anda, Amplify memeriksa setelan build untuk aplikasi. Anda dapat menyimpan pengaturan build di konsol Amplify atau di file `amplify.yml` di root repositori Anda. Untuk informasi lebih lanjut, lihat [Mengonfigurasi setelan build untuk aplikasi Amplify](build-settings.md).
Jika Amplify mendeteksi bahwa Anda men-deploy aplikasi Next.js SSR, dan tidak ada file `amplify.yml`, Amplify akan membuat buildspec untuk aplikasi dan mengatur `baseDirectory` ke `.next`. Jika Anda men-deploy aplikasi berisi file `amplify.yml`, pengaturan build di file akan menimpa pengaturan build di konsol. Oleh karena itu, Anda harus secara manual mengatur `baseDirectory` ke `.next` di file.
Berikut contoh pengaturan build untuk aplikasi dengan `baseDirectory` diatur ke `.next`. Artinya, artefak build ditujukan untuk aplikasi Next.js yang mendukung halaman SSG dan SSR.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## Amplify pengaturan build untuk Next.js 13 atau aplikasi SSG sebelumnya
Jika Amplify mendeteksi bahwa Anda menerapkan Next.js 13 atau aplikasi SSG sebelumnya, Amplify akan menghasilkan spesifikasi build untuk aplikasi dan disetel ke. `baseDirectory` `out` Jika men-deploy aplikasi berisi file `amplify.yml`, Anda harus secara manual mengatur `baseDirectory` ke `out` di file. `out`Direktori adalah folder default yang dibuat Next.js untuk menyimpan aset statis yang diekspor. Saat mengonfigurasi setelan spesifikasi build aplikasi, ubah nama `baseDirectory` folder agar sesuai dengan konfigurasi aplikasi.
Berikut ini adalah contoh setelan build untuk aplikasi yang `baseDirectory` disetel `out` untuk menunjukkan bahwa artefak build adalah untuk Next.js 13 atau aplikasi sebelumnya yang hanya mendukung halaman SSG.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: out
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## Amplify pengaturan build untuk aplikasi SSG Next.js 14 atau yang lebih baru
Di Next.js versi 14, `next export` perintah tidak digunakan lagi dan diganti dengan `output: 'export'` `next.config.js` file untuk mengaktifkan ekspor statis. Jika Anda menerapkan aplikasi Next.js 14 SSG saja di konsol, Amplify akan menghasilkan buildspec untuk aplikasi dan disetel ke. `baseDirectory` `.next` Jika men-deploy aplikasi berisi file `amplify.yml`, Anda harus secara manual mengatur `baseDirectory` ke `.next` di file. Ini adalah `baseDirectory` pengaturan yang sama yang Amplify gunakan untuk `WEB_COMPUTE` aplikasi Next.js yang mendukung halaman SSG dan SSR.
Berikut ini adalah contoh pengaturan build untuk aplikasi Next.js 14 SSG saja dengan `baseDirectory` set ke`.next`.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```