next on netlify Unduh - next on netlify Sumber Code Unduh

next on netlify

Kode Sumber AI

v3.0.1

Unduh

Mencela next-on-netlify

Kami mencela next-on-netlify untuk mendukung plugin Netlify Essential Next.js. Silakan kunjungi masalah ini untuk mempelajari lebih lanjut tentang penghentian next-on-netlify dan ajukan pertanyaan apa pun. Anda juga dapat mengunjungi dokumen migrasi sederhana kami untuk mendapatkan bantuan yang bermigrasi ke plugin.

Bangun plugin @netlify/plugin-nextjs
Paket NPM Plugin

next-on-netlify adalah utilitas untuk mengaktifkan rendering sisi server di Next.js di Netlify. Ini membungkus aplikasi Anda dalam lapisan kompatibilitas kecil, sehingga halaman dapat menggunakan fungsi netlify untuk diserahkan sisi server.

Daftar isi

Instalasi
Pengaturan
- 1. Atur target selanjutnya.js ke serverless
- 2. Tambahkan kait postbuild
- 3. Konfigurasikan untuk Netlify
  - (Opsional) Mengkonfigurasi submodul GIT pribadi
Demo
Tambahan opsional
- Pratinjau secara lokal
- Redirect Netlify Kustom
- Fungsi Netlify Kustom
- Fungsi latar belakang
- Menggunakan identitas netlify
Peringatan
- Fallbacks for Pages with getStaticPaths
- Berikutnya/Gambar
Kredit
Memamerkan

Instalasi

 npm install --save next-on-netlify

Pengaturan

1. Atur target selanjutnya.js ke serverless

Kita harus membangun aplikasi Next.js kami sebagai aplikasi tanpa server. Anda dapat membaca lebih lanjut tentang serverless next.js di sini.

Ini sangat sederhana. Cukup buat file next.config.js di root proyek Anda dan tulis yang berikut:

 // next.config.js

module . exports = {
  // Target must be serverless
  target : "serverless" ,
} ;

Jika binari diperlukan dalam penyebaran, konfigurasi berikut diperlukan (Prisma adalah contoh):

 // next.config.js

module . exports = {
  // Target must be experimental-serverless-trace
  // Your build time will be longer with this option
  target : "experimental-serverless-trace" ,
} ;

2. Tambahkan kait postbuild

Paket Next-on-Netlify menambahkan perintah next-on-netlify . Ketika kami menjalankan perintah ini, beberapa keajaiban terjadi untuk mempersiapkan aplikasi berikutnya. JS kami untuk hosting di Netlify*.

Kami ingin perintah berikutnya-netlify untuk dijalankan setelah kami membangun aplikasi berikutnya. Jadi mari kita tambahkan kait postbuild ke file package.json kami. Anda harus menambahkan "postbuild": "next-on-netlify" ke skrip yang ada, seperti itu:

 {
  "name": "my-nextjs-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "postbuild": "next-on-netlify"
  },
  ...
}

*Jika Anda ingin tahu tentang "sihir", lihat file next-on-netlify.js yang terdokumentasi dengan baik.

3. Konfigurasikan untuk Netlify

Kami hampir selesai! Kami hanya perlu memberi tahu Netlify cara membangun aplikasi berikutnya.js kami, di mana folder fungsi berada, dan folder mana yang harus diunggah ke CDN -nya. Kami melakukannya dengan file netlify.toml di root proyek Anda dan instruksi berikut:

[ build ]
  command   = " npm run build "
  functions = " out_functions "
  publish   = " out_publish "

Catatan: out_functions dan out_publish dikodekan dengan keras menjadi next-on-netlify. Ini tidak dapat dikonfigurasi saat ini.

(Opsional) Mengkonfigurasi submodul GIT pribadi

Jika proyek Anda berisi submodul pribadi, untuk menyebarkannya, Anda perlu:

Hasilkan tombol penyebaran di Netlify dan tambahkan ke submodul yang relevan sehingga mereka dapat dikloning selama proses penyebaran.
Pastikan remote submodule diatur ke format SSH (yaitu [email protected]:owner/project.git , bukan https://... ). Di dalam direktori submodule, remote git dapat diperbarui dengan:
```
 # git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.git
```

Kami sudah selesai. Mari kita berikan

Jika Anda tidak terbiasa dengan Netlify, ikuti instruksi penerapan di sini: https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/

Demo

Situs: https://next-on.netlify.com/
Kode: https://github.com/netlify-labs/next-on-netlify-demo

Tambahan opsional

Pratinjau secara lokal

Saya sarankan Anda masih menggunakan next dev untuk membangun dan mempratinjau aplikasi Anda secara lokal.

Tetapi jika Anda ingin meniru penyebaran netlify di komputer Anda, Anda juga dapat menjalankan next-on-netlify secara lokal dan kemudian menggunakan netlify-cli untuk melihat pratinjau hasilnya.

Pertama, instal versi terbaru netlify-cli (Anda juga dapat melihat paket.json untuk melihat versi yang telah diuji oleh Next-on-Netlify):

npm install -g netlify-cli

Kemudian, tambahkan blok [dev] berikut ke netlify.toml Anda:

 # netlify.toml

# [build]
#   ...

[ dev ]
  functions = " out_functions "
  publish   = " out_publish "
  # We manually set the framework to static, otherwise Netlify automatically
  # detects Next.js and redirects do not work.
  # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
  framework = " #static "

Terakhir, tambahkan baris berikut ke .gitignore Anda:

 # .gitignore

# Files generated by next-on-netlify command
/out_publish/
/out_functions/

Sekarang Anda siap.

Mulai sekarang, kapan pun Anda ingin melihat pratinjau aplikasi Anda secara lokal, cukup jalankan:

npx next-on-netlify watch : Ini akan menjalankan next build untuk membangun aplikasi Next.js Anda dan next-on-netlify untuk menyiapkan aplikasi Next.js Anda untuk kompatibilitas dengan Netlify. Perubahan kode sumber apa pun akan memicu bangunan lain.
netlify dev : Ini akan meniru Netlify di komputer Anda dan memungkinkan Anda melihat pratinjau aplikasi Anda di http://localhost:8888 .

Catatan:

Mode pratinjau belum tersedia secara lokal, menjalankan netlify dev , untuk halaman statis tanpa revalidasi atau fallback. Ini akan segera didukung.

Untuk saat ini, mode pratinjau didukung dalam produksi untuk semua jenis halaman berikutnya.

Redirect Netlify Kustom

Anda dapat mendefinisikan pengalihan khusus di _redirects dan/atau di file netlify.toml Anda. Prioritas aturan ini adalah:

_redirects
Redirects next-on-netlify

Saat ini, tidak ada dukungan untuk pengalihan yang ditetapkan dalam file netlify.toml Anda.

Baca lebih lanjut tentang pengalihan netlify di sini.

Fungsi Netlify Kustom

next-on-netlify membuat satu fungsi netlify untuk masing-masing halaman SSR Anda dan titik akhir API. Saat ini, Anda hanya dapat membuat fungsi Netlify khusus menggunakan @netlify/plugin-nextjs.

Fungsi latar belakang

Jika halaman/rute API Next.js Anda berakhir di -background , itu akan diperlakukan sebagai fungsi latar belakang Netlify. Catatan: Fungsi latar hanya tersedia pada rencana tertentu.

Menggunakan identitas netlify

Anda dapat menggunakan Netlify Identity dengan next-on-netlify . Untuk semua halaman dengan rendering sisi server (getInitialprops*, getServerSideprops, dan rute API), Anda dapat mengakses objek ClientContext melalui parameter req .

Misalnya:

 const Page = ( ) => < p > Hello World! </ p > ;

export const getServerSideProps = async ( { req } ) => {
  // Get event and context from Netlify Function
  const {
    netlifyFunctionParams : { event , context } ,
  } = req ;

  // Access Netlify identity
  const { identity , user } = context . clientContext ;

  return {
    props : { } ,
  } ;
} ;

export default Page ;

Untuk mengakses netlify identitas dari halaman tanpa rendering sisi server, Anda dapat membuat rute API berikutnya yang melakukan logika terkait identitas:

 export default async function getUser ( req , res ) {
  // Get event and context from Netlify Function
  const {
    netlifyFunctionParams : { event , context } ,
  } = req ;

  // Access Netlify identity
  const { user } = context . clientContext ;

  // Respond with user object
  res . json ( { user } ) ;
}

* Perhatikan bahwa halaman menggunakan getInitialprops hanya sisi server yang diberikan pada beban halaman awal dan bukan ketika pengguna menavigasi sisi klien di antara halaman.

Peringatan

Fallbacks for Pages with `getStaticPaths`

Fallback Pages berperilaku berbeda dengan next-on-netlify daripada yang mereka lakukan dengan Next.js. Di Next.js, saat menavigasi ke jalur yang tidak didefinisikan di getStaticPaths , pertama -tama menampilkan halaman Fallback. Next.js kemudian menghasilkan HTML di latar belakang dan menyimpannya untuk permintaan di masa depan.

Dengan next-on-netlify , saat menavigasi ke jalur yang tidak didefinisikan di getStaticPaths , Sisi Server ini membuat halaman dan mengirimkannya langsung ke pengguna. Pengguna tidak pernah melihat halaman Fallback. Halaman ini tidak di -cache untuk permintaan di masa depan.

Untuk lebih lanjut tentang ini, lihat: Edisi #7

Berikutnya/Gambar

Solusi kami yang ada untuk berikutnya/gambar tidak terlalu berkinerja. Kami memiliki peningkatan kinerja pada peta jalan kami, tergantung pada pekerjaan internal.

Untuk mendapatkan kinerja yang lebih baik sekarang, kami sarankan menggunakan penyedia cloud seperti Cloudinary (lihat Dokumen Next.js).

Kredit

Paket ini dikelola oleh Lindsay Levine, Finn Woelm, dan Cassidy Williams.

Shoutout ke @mottox2 (pelopor hosting Next.js di netlify) dan @danielcondeMarin (penulis serverless-next.js untuk AWS). Keduanya adalah inspirasi besar untuk paket ini.

? "Terima kasih" besar kepada orang -orang berikut atas kontribusi, dukungan, dan pengujian beta mereka: