Jika Anda membangun aplikasi Angular atau Next.js yang dirender server, lihat Firebase App Hosting generasi berikutnya, sebuah solusi full stack untuk framework web modern.

Halaman ini diterjemahkan oleh Cloud Translation API.

Mengintegrasikan Next.js

Dengan Firebase CLI, Anda dapat men-deploy aplikasi Web Next.js ke Firebase dan menayangkannya dengan Firebase Hosting. CLI mengikuti setelan Next.js dan menerjemahkannya ke setelan Firebase tanpa atau hanya dengan sedikit konfigurasi ekstra dari Anda. Jika aplikasi Anda menyertakan logika sisi server dinamis, CLI akan men-deploy logika tersebut ke Cloud Functions for Firebase. Next.js terbaru yang didukung adalah versi 13.4.7.

Sebelum memulai

Sebelum Anda mulai men-deploy aplikasi ke Firebase, tinjau persyaratan dan opsi berikut:

Firebase CLI versi 12.1.0 atau yang lebih baru. Pastikan untuk menginstal CLI menggunakan metode pilihan Anda.
Opsional: Penagihan diaktifkan di project Firebase Anda (wajib jika Anda berencana menggunakan SSR).
Opsional: Gunakan library ReactFire eksperimental untuk memanfaatkan fiturnya yang cocok untuk Firebase.

Menginisialisasi Firebase

Untuk memulai, lakukan inisialisasi Firebase untuk project framework Anda. Gunakan Firebase CLI untuk project baru, atau ubah firebase.json untuk project yang sudah ada.

Melakukan inisialisasi project baru

Di Firebase CLI, aktifkan pratinjau framework web:
```
firebase experiments:enable webframeworks
```
Jalankan perintah inisialisasi dari CLI, lalu ikuti petunjuknya:
```
firebase init hosting
```
Jawab ya untuk "Do you want to use a web framework? (eksperimental)"
Pilih direktori sumber hosting Anda. Jika ini adalah aplikasi Next.js yang sudah ada, proses CLI akan selesai, dan Anda dapat melanjutkan ke bagian berikutnya.
Jika diminta, pilih Next.js.

Menayangkan konten statis

Setelah menginisialisasi Firebase, Anda dapat menayangkan konten statis dengan perintah deployment standar:

firebase deploy

Anda dapat melihat aplikasi yang di-deploy di situs live-nya.

Merender konten dinamis di awal

Firebase CLI akan mendeteksi penggunaan getStaticProps dan getStaticPaths.

Opsional: mengerintegrasikan dengan Firebase JS SDK

Ketika Anda menyertakan metode Firebase JS SDK di paket server dan klien, jaga agar tidak terjadi error runtime dengan memeriksa isSupported() sebelum menggunakan produk. Tidak semua produk didukung di semua lingkungan.

Opsional: mengintegrasikan dengan Firebase Admin SDK

Paket Admin SDK akan gagal jika disertakan dalam build browser Anda; rujuk paket hanya di dalam getStaticProps dan getStaticPaths.

Menayangkan konten yang sepenuhnya dinamis (SSR)

Firebase CLI akan mendeteksi penggunaan getServerSideProps. Dalam kasus seperti ini, CLI akan men-deploy fungsi ke Cloud Functions for Firebase untuk menjalankan kode server dinamis. Anda dapat melihat informasi tentang fungsi ini, seperti konfigurasi domain dan runtime, di Firebase console.

Mengonfigurasi perilaku Hosting dengan `next.config.js`

Pengoptimalan Gambar

Penggunaan Pengoptimalan Gambar Next.js didukung, tetapi akan memicu pembuatan fungsi (di Cloud Functions for Firebase), meskipun Anda tidak menggunakan SSR.

Pengalihan, Penulisan Ulang, dan Header

Firebase CLI mematuhi pengalihan, penulisan ulang, dan header di next.config.js, dengan mengonversinya ke konfigurasi Firebase Hosting masing-masing yang setara pada waktu deployment. Jika tidak dapat dikonversi ke header Firebase Hosting yang setara, pengalihan, penulisan ulang, atau header Next.js akan kembali dan mem-build fungsi, meskipun Anda tidak menggunakan pengoptimalan gambar atau SSR.

Opsional: mengintegrasikan dengan Firebase Authentication

Alat deployment Firebase berbasis framework web akan otomatis menyinkronkan status klien dan server menggunakan cookie. Ada beberapa metode yang disediakan untuk mengakses konteks autentikasi di SSR:

Objek res.locals Express secara opsional akan berisi instance Aplikasi Firebase yang diautentikasi (firebaseApp) dan pengguna yang sedang login (currentUser). Ini dapat diakses di getServerSideProps.
Nama Aplikasi Firebase yang diautentikasi diberikan pada kueri rute (__firebaseAppName). Hal ini memungkinkan integrasi manual saat dalam konteks:

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);