Apl Next.js yang digunakan pada Vercel memaparkan kandungan tertentu secara setempat tetapi gagal untuk memaparkannya dalam binaan pengeluaran

Question

Saya mempunyai apl web yang dibina menggunakan Next.JS dan Firebase dan digunakan pada Vercel. Semuanya berfungsi dengan baik sehingga baru-baru ini apabila saya menambah bar navigasi bawah dengan kedudukannya ditetapkan kepada statik, bottom:0.

Di bahagian bawah bar navigasi, saya memaparkan ikon dan teks. Walaupun ia dimuatkan dengan baik dalam localhost (menggunakan npm run dev), saya menyedari bahawa kandungan navigasi bawah tidak akan dipaparkan dalam binaan pengeluaran yang digunakan untuk Vercel. Hanya bekas navigasi bawah (atau div) dipaparkan dalam binaan pengeluaran. Kandungan dalaman (ikon dan teks) tidak akan dipaparkan.

Apabila saya menyemak menggunakan Chrome DevTools, kandungan dalaman yang hilang tidak muncul di bawah Elements dalam versi yang digunakan, tetapi ia muncul di bawah Elements on localhost. Saya juga mencuba plugin React Components dengan hasil yang sama.

Adakah ini perkara biasa? Adakah terdapat cara untuk menyelesaikannya?

Di bawah ialah tangkapan skrin yang menunjukkan ikon dan teks (baris 37 - 40)

Di bawah ialah imej bar navigasi bawah yang menunjukkan kandungan dalaman pada localhost

Di bawah ialah imej bar navigasi bawah, tidak menunjukkan kandungan dalaman versi pengeluaran yang digunakan untuk Vercel

Answer 1

Adakah anda cuba menjalankannya secara tempatan npm run build sebelum menolaknya ke Vercel? Kerana dalam Vercel ia akan menjalankan binaan untuk mengumpul data, menjana halaman statik... Cuba jalankan, saya rasa ia akan menunjukkan ralat