Bagaimana untuk Membetulkan Ralat 'tetingkap tidak ditakrifkan' dalam Next.js?

Tetingkap tidak ditakrifkan dalam Next.js React App: A Comprehensive Resolution

Dalam aplikasi Next.js, anda mungkin menghadapi ralat " tetingkap tidak ditakrifkan" apabila cuba mengakses objek 'tetingkap' global. Ini boleh berlaku kerana objek tetingkap hanya tersedia semasa pemaparan sebelah klien. Begini cara anda boleh menyelesaikan isu ini:

Untuk menggunakan objek 'window', anda boleh mengelilingi kod anda dengan pernyataan 'if' yang menyemak sama ada 'window' ditakrifkan:

if (typeof window !== "undefined") {
  // Client-side-only code
  console.log('window.innerHeight', window.innerHeight);
}

Pendekatan ini memastikan bahawa kod dalam blok 'jika' hanya dilaksanakan pada bahagian klien, di mana objek 'tetingkap' berada boleh diakses.

Menggunakan cadangan untuk mengakses 'window' melalui 'process.browser' tidak lagi disyorkan kerana ia telah ditamatkan dalam kedua-dua Webpack5 dan Next.js. Objek 'proses' digunakan terutamanya untuk pemaparan bahagian pelayan dan menggunakannya untuk operasi bahagian klien adalah tidak sesuai.

Oleh itu, penyelesaian yang disyorkan adalah untuk menyemak kehadiran objek 'tetingkap' sebelum mengaksesnya. Ini memastikan kod anda mudah alih antara persekitaran pemaparan sebelah klien dan sebelah pelayan.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Ralat 'tetingkap tidak ditakrifkan' dalam Next.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!