Page Blank setelah Routing? Cara Mengatasi App Router Page Tidak Muncul Next Js

Ditulis oleh Next.js

Page blank setelah routing di App Router biasanya karena file page.tsx gagal render, bukan karena route hilang. Cek terminal dulu, lalu console browser. Error di Server Component menghentikan seluruh halaman jadi putih.

Penyebab Page App Router Tidak Muncul

Next.js hanya merender route kalau struktur foldernya tepat. Satu huruf salah di nama file cukup membuat halaman tidak ditemukan.

  • Salah struktur folder dan nama file page.tsx. Route /dashboard wajib memakai app/dashboard/page.tsx, huruf kecil semua.
  • Error di Server Component menghentikan render. Fetch gagal, database error, atau throw tanpa error.tsx membuat layar putih.
  • Browser API dipakai di Server Component. window, document, localStorage, dan event handler tidak tersedia di server.
  • Cache dan navigasi client tidak sinkron. Pengguna melihat konten lama setelah pindah halaman memakai navigasi client.

Tabel Diagnosis Page Tidak Muncul

Bedakan gejalanya sebelum memperbaiki. Layar putih, konten lama, dan error boundary punya penyebab berbeda.

Masalah Penyebab Solusi
Layar putih total Error di Server Component Baca log terminal, perbaiki fetch dan validasi data
Blank setelah klik Link Komponen tujuan memakai browser API Pindahkan ke Client Component dengan batas jelas
Konten lama tetap tampil Cache route App Router Periksa opsi cache fetch dan revalidation
Pesan error merah Error boundary aktif Periksa file error.tsx dan stack trace
404 padahal file ada Nama folder atau file salah Samakan nama route dan restart dev server

BACA JUGA:

Langkah Memperbaiki Page yang Blank

Ikut urutan ini dari file route sampai console agar tidak menebak.

  1. Periksa path route. Pastikan ada app/nama-route/page.tsx dengan export default.
  2. Baca log terminal dan console browser. Terminal menampilkan error server, console menampilkan error hydration dan client.
  3. Pisahkan Server dan Client Component. Pindahkan useState, useEffect, dan window ke file khusus client.
  4. Uji ulang dengan reload penuh dan navigasi memakai Link App Router.
// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// app/dashboard/page.tsx
import Link from "next/link";

export default function HomePage() {
  return <Link href="/dashboard">Buka Dashboard</Link>;
}

FAQ

Apakah use client memperbaiki page blank?

Tidak selalu. Instruksi tersebut hanya tepat kalau halaman memang butuh state, effect, atau browser API.

Kenapa page muncul di dev tapi tidak di production?

Penyebab umum adalah data berbeda, environment belum diisi, atau perilaku cache production yang lebih agresif.

Kapan perlu cek cache dan restart dev server?

Lakukan setelah mengganti struktur route, mengubah fetch berkas cache, atau halaman tetap menampilkan konten lama.

Artikel Terkait