Bagikan melalui

Menyebarkan situs web Next.js di Azure Static Web Apps

Next.js dukungan di Azure Static Web Apps dapat dikategorikan sebagai dua model penyebaran:

Aplikasi Next.js hibrid (pratinjau)

Static Web Apps mendukung penyebaran situs web Next.js hibrid. Ini memungkinkan dukungan untuk semua fitur Next.js, seperti Router Aplikasi dan Komponen Server React.

Aplikasi Next.js hibrid dihosting menggunakan host konten statis statis yang didistribusikan secara global dan fungsi backend terkelola. Next.js fungsi backend dihosting pada instans App Service khusus untuk memastikan kompatibilitas fitur lengkap.

Dengan aplikasi Next.js hibrid, halaman dan komponen dapat dirender secara dinamis, dirender secara statis, atau dirender secara bertahap. Next.js secara otomatis menentukan model penyajian dan penembolokan terbaik berdasarkan pengambilan data Anda untuk performa optimal.

Fitur utama yang tersedia dalam pratinjau adalah:

Ikuti tutorial menyebarkan aplikasi Next.js hibrid untuk mempelajari cara menyebarkan aplikasi Next.js hibrid ke Azure.

Fitur yang tidak didukung dalam pratinjau

Fitur Static Web Apps berikut tidak didukung untuk Next.js dengan penyajian hibrid:

  • Pilih layanan Azure: API tertaut menggunakan Azure Functions, Azure App Service, Azure Container Apps, atau Azure API Management.
  • Fitur SWA CLI: Emulasi dan penyebaran lokal SWA CLI.
  • Dukungan fitur parsial: Properti berikut dalam staticwebapp.config.json file tidak didukung:
    • Fallback navigasi tidak didukung.
    • Penulisan ulang rute ke rute dalam aplikasi Next.js harus dikonfigurasi dalam next.config.js.
    • Konfigurasi dalam staticwebapp.config.json file lebih diutamakan daripada konfigurasi dalam next.config.js.
    • Konfigurasi untuk situs Next.js harus ditangani menggunakan next.config.js untuk kompatibilitas fitur lengkap.
  • Build skipping: Untuk aplikasi Next.js jika skip_api_build=true, Static Web Apps tidak menghapus dependensi dev atau menambahkan paket tajam secara default. Jika Anda menginginkan pengoptimalan ini, tambahkan ke langkah-langkah build kustom Anda sebelum melewati skip_app_build=true.
  • Regenerasi statis inkremental (ISR): Penembolokan gambar tidak didukung.

Catatan

Ukuran aplikasi maksimum untuk aplikasi Next.js hibrid adalah 250 MB. Gunakan fitur mandiri dengan Next.js untuk ukuran aplikasi yang dioptimalkan. Jika ini tidak cukup, pertimbangkan untuk menggunakan HTML Statis yang diekspor Next.js jika persyaratan ukuran aplikasi Anda lebih dari 250 MB.

Penyajian sisi server

Langkah-langkah berikut menunjukkan kepada Anda cara mengaitkan backend kustom ke paket Standar Anda dan di atas aplikasi web statis.

Catatan

Backend tertaut hanya tersedia untuk situs yang menggunakan paket Standar atau di atasnya.

  1. Buka aplikasi web statis Anda di portal Azure.

  2. Pilih Pengaturan lalu API dari menu samping.

  3. Pilih Konfigurasikan backend tertaut.

  4. Buat Paket App Service baru atau pilih Paket App Service yang sudah ada.

    Paket App Service yang Anda pilih harus menggunakan setidaknya SKU S1 .

  5. Klik Tautan.

Ekspor HTML statis

Anda dapat menyebarkan situs statis Next.js menggunakan fitur ekspor HTML statis Next.js. Konfigurasi ini menghasilkan file HTML statis selama build, yang di-cache dan digunakan kembali untuk semua permintaan. Lihat fitur ekspor statis Next.js yang didukung.

Situs Next.js statis dihosting di jaringan terdistribusi secara global Azure Static Web Apps untuk performa optimal. Selain itu, Anda dapat menambahkan backend tertaut untuk API Anda.

Untuk mengaktifkan ekspor statis aplikasi Next.js, tambahkan output: 'export' ke nextConfig di next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

Anda juga harus menentukan output_location dalam konfigurasi GitHub Actions/Azure DevOps. Secara default, nilai ini diatur ke out sesuai default Next.js. Jika lokasi output kustom ditunjukkan dalam konfigurasi Next.js, nilai yang disediakan untuk build harus cocok dengan yang dikonfigurasi dalam ekspor Next.js.

Jika Anda menggunakan skrip build kustom, atur IS_STATIC_EXPORT ke true dalam tugas Static Web Apps dari file YAML GitHub Actions/Azure DevOps.

Contoh berikut menunjukkan pekerjaan Tindakan GitHub yang diaktifkan untuk ekspor statis.

      - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

Ikuti tutorial menyebarkan situs web Next.js yang dirender statis untuk mempelajari cara menyebarkan aplikasi Next.js yang diekspor secara statis ke Azure.

  • Last updated on