Ekspor statis Next.js hanyalah HTML, CSS, dan JavaScript. Tidak ada server yang berjalan, tidak ada database yang menunggu, dan hosting gratis di Netlify. Jika halaman Anda tidak membaca cookie per permintaan atau mengubah data, lakukan ini. Ini adalah kemenangan kinerja termurah yang pernah ada.

Aktifkan ekspor statis

Di next.config.ts, atur output untuk mengekspor dan matikan pengoptimal gambar, yang memerlukan server langsung:

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

Komponen apa pun yang menggunakan cookie, tindakan server, atau middleware sekarang akan membuat build gagal, secara besar-besaran, dan pada waktu kompilasi. Itu adalah fiturnya, bukan bug: Anda mempelajari apa yang dinamis sebelum diterapkan, bukan setelahnya.

Beritahu Netlify di mana situs tersebut berada

Plugin Next.js Netlify mendeteksi output: ekspor dengan sendirinya dan menyalin folder keluar. Netlify.toml Anda dapat terdiri dari dua baris:

[build]
  command = "npm run build"
  publish = "out"
  1. npm run build menjalankan build berikutnya, yang menulis seluruh situs ke dalam out/ sebagai file HTML.
  2. Netlify menerbitkan/di CDN globalnya. Setiap halaman adalah file. Tidak ada yang memulai, tidak ada yang terhenti.
  3. Tambahkan public/_headers untuk masa pakai cache yang lama pada gambar, font, dan bundel.

Ketahuilah apa yang Anda serahkan

  • Tidak ada middleware atau penulisan ulang, karena tidak ada lagi penangan permintaan.
  • Tidak ada tindakan server atau penangan rute yang membaca permintaan.
  • Gambar dikirim apa adanya, jadi ubah ukurannya satu kali pada waktu pembuatan dan kirimkan WebP.
Statis bukanlah penurunan versi. Itu adalah memilih bahwa halaman Anda ada sebelum pengunjung muncul.

Untuk apa pun yang dibaca orang, statis sangat bagus: cepat di mana saja, tidak memerlukan biaya apa pun, dan penerapan tidak dapat merusak halaman yang sedang berjalan. Ingin resep lengkap agar mesin pencari memperhatikan situs baru? Kami menulisnya di sini.