Solusi Next.js Blank Page: Penyebab dan Cara Memperbaikinya

Penyebab Utama Blank Page pada Next.js

Masalah halaman kosong (blank page) pada aplikasi Next.js umumnya disebabkan oleh kegagalan proses rendering di sisi klien (client-side) atau kesalahan konfigurasi saat proses build. Penyebab paling sering adalah Hydration Mismatch, di mana konten yang dihasilkan server tidak cocok dengan konten yang dirender oleh browser, atau adanya runtime error pada komponen React yang menyebabkan eksekusi JavaScript terhenti sebelum DOM selesai dimuat.

Langkah Diagnosa Cepat

Sebelum melakukan perbaikan kode, lakukan langkah berikut untuk mengidentifikasi sumber masalah:

• Cek Console Browser: Tekan F12, buka tab 'Console'. Cari pesan error berwarna merah. Jika ada pesan 'Hydration failed', masalah ada pada perbedaan struktur HTML antara server dan klien.
• Cek Network Tab: Pastikan file JavaScript utama (chunk) berhasil dimuat dengan status 200 OK. Jika statusnya 404 atau 500, maka file tersebut gagal diakses.
• Cek Server Logs: Jika menggunakan SSR (Server-Side Rendering), periksa log di terminal tempat aplikasi berjalan untuk melihat apakah ada unhandled promise rejection.

Perbaikan Hydration Mismatch

Jika Anda mendapatkan error hydration, biasanya disebabkan oleh penggunaan elemen HTML yang tidak valid di dalam tag lain (seperti <p> di dalam <p>) atau penggunaan nilai dinamis yang berbeda antara server dan klien (seperti new Date()). Gunakan pola berikut untuk mengatasinya:

import { useState, useEffect } from 'react';

export default function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <div>
      {isClient ? <p>Konten ini hanya muncul di client</p> : null}
    </div>
  );
}

Implementasi Error Boundary

Untuk mencegah seluruh aplikasi menjadi blank saat satu komponen gagal, gunakan Error Boundary. Di Next.js (App Router), Anda cukup membuat file error.js di dalam folder route yang bermasalah.

'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Terjadi kesalahan!</h2>
      <button onClick={() => reset()}>Coba lagi</button>
    </div>
  );
}

Tips Troubleshooting Lapangan

1. Hapus Cache: Jalankan rm -rf .next lalu npm run build untuk memastikan tidak ada sisa build lama yang korup.
2. Update Dependencies: Pastikan versi next, react, dan react-dom sinkron. Gunakan npm outdated untuk mengecek versi terbaru.
3. Cek Middleware: Jika Anda menggunakan Middleware, pastikan tidak ada logika redirect yang menyebabkan loop tak terbatas (infinite loop) yang memicu blank page.