Package.json pengaturan file Amplify pengaturan build untuk aplikasi SSR Next.js Amplify pengaturan build untuk aplikasi Next.js SSG 13 atau sebelumnya Amplify pengaturan build untuk aplikasi SSG Next.js 14 atau yang lebih baru

Menyebarkan aplikasi Next.js SSR untuk Amplify

Secara default, Amplify menyebarkan aplikasi SSR baru menggunakan layanan komputasi Amplify Hosting dengan dukungan untuk versi 12 hingga 15. Next.js 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 Next.js (khusus 11).

Kami sangat menyarankan Anda memigrasikan aplikasi menggunakan SSR Klasik (khusus 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 Memigrasi Next.js 11 aplikasi SSR ke komputasi Amplify Hosting.

Gunakan petunjuk berikut untuk menerapkan aplikasi Next.js SSR baru.

Untuk menerapkan aplikasi SSR ke Amplify menggunakan penyedia SSR komputasi Amplify Hosting

Masuk ke Konsol Manajemen AWS dan buka konsol Amplify.
Pada halaman Semua aplikasi, pilih Buat aplikasi baru.
Pada halaman Mulai membangun dengan Amplify, pilih penyedia repositori Git Anda, lalu pilih Berikutnya.
Di halaman Tambahkan cabang repositori, lakukan langkah berikut:
1. Dalam daftar repositori yang baru diperbarui, pilih nama repositori yang akan dihubungkan.
2. Dalam daftar Branch, pilih nama cabang repositori untuk terhubung.
3. Pilih Berikutnya.
Aplikasi 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.
  2. Pilih peran yang akan digunakan dari daftar.
Pilih Berikutnya.
Di halaman Tinjauan, pilih Simpan dan deploy.

Package.json pengaturan file

Saat Anda menerapkan Next.js aplikasi, Amplify akan memeriksa skrip build aplikasi dalam package.json file untuk menentukan jenis aplikasi.

Berikut ini adalah contoh skrip build untuk Next.js aplikasi. Skrip build "next build" menunjukkan bahwa aplikasi mendukung halaman SSG dan SSR. Skrip build ini juga digunakan untuk Next.js 14 atau lebih baru aplikasi SSG saja.


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

Berikut ini adalah contoh skrip build untuk aplikasi SSG Next.js 13 atau 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 selengkapnya, lihat Mengonfigurasi setelan build untuk aplikasi Amplify.

Jika Amplify mendeteksi bahwa Anda menerapkan aplikasi Next.js SSR, dan tidak ada amplify.yml file yang ada, itu akan menghasilkan spesifikasi build untuk aplikasi dan disetel ke. baseDirectory .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. Ini menunjukkan bahwa artefak build adalah untuk Next.js aplikasi 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 aplikasi Next.js SSG 13 atau sebelumnya

Jika Amplify mendeteksi bahwa Anda menerapkan aplikasi SSG Next.js 13 atau lebih lama, 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. outDirektori adalah folder default yang Next.js dibuat 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 disetel out untuk menunjukkan bahwa artefak build adalah untuk aplikasi Next.js 13 atau lebih lama yang hanya mendukung halaman SSG. baseDirectory


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 Next.js 14 aplikasi 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 Next.js WEB_COMPUTE aplikasi 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/**/*

Konvensi Dokumen

Next.js

Memigrasi Next.js 11 aplikasi SSR ke komputasi Amplify Hosting