Perbaiki Navigasi Blank dengan Cara Mengatasi Invariant Expected App Router To Be Mounted

Ditulis oleh Next.js

Cara mengatasi invariant expected app router to be mounted paling cepat adalah memindahkan useRouter, usePathname, useSearchParams, atau Link dari next/navigation ke Client Component yang benar-benar dirender di dalam app/layout.tsx. Error ini berarti kode navigasi berjalan tanpa konteks App Router, biasanya karena dipanggil dari Server Component atau dari komponen yang dirender di luar tree layout.

Penyebab Invariant Expected App Router to Be Mounted

Pesan ini muncul ketika React tidak menemukan provider router saat hook navigasi dijalankan. Fokusnya bukan di versi Next.js saja, melainkan posisi komponen dalam tree App Router.

  • Hook navigasi dipakai di luar konteks App Router, misalnya di komponen yang dirender terpisah dari app/layout.tsx.
  • Server Component memanggil API navigasi milik client. useRouter, usePathname, dan useSearchParams hanya valid di Client Component.
  • Provider atau layout App Router belum terpasang saat render, misalnya root layout tertimpa, struktur folder app rusak, atau komponen dites tanpa wrapper router.

Tabel Troubleshooting Cepat

Gejala Pemicu umum Periksa dulu
Error dari useRouter Import dari paket salah atau Server Component Import next/navigation dan tambah use client
Error dari usePathname Navbar atau breadcrumb server Pindah hook ke komponen client anak
Halaman blank setelah Link Struktur layout rusak Pastikan ada html dan body di root layout

BACA JUGA:

Cara Memperbaiki Error sampai Navigasi Normal Lagi

  1. Baca log asli lengkap. Catat nama file dan baris pemicu, bukan hanya pesan invariant.
  2. Isolasi komponen pemicu. Nonaktifkan sementara navbar, auth guard, modal, atau provider kustom sampai error hilang.
  3. Perbaiki konteks client. Pindahkan hook ke file Client Component kecil, lalu panggil sebagai komponen anak dari Server Component.
  4. Perbaiki struktur layout. Pastikan app/layout.tsx mengekspor root layout default dan merender {children}.
  5. Verifikasi ulang build dan navigasi antar route dengan next dev, lalu next build.
"use client";

import { usePathname, useRouter } from "next/navigation";

export default function ActiveNav() {
  const pathname = usePathname();
  const router = useRouter();

  if (pathname === "/login") {
    return null;
  }

  return (
    <button type="button" onClick={() => router.push("/dashboard")}>
      Ke Dashboard
    </button>
  );
}

Untuk komponen server, impor ActiveNav di atas tanpa memindahkan seluruh halaman menjadi client.

FAQ

Apakah error ini sama dengan next router not mounted?

Tidak sama. Pesan ini khusus konteks App Router hilang, sedangkan error Pages Router biasanya terkait next/router.

Kenapa tambah use client saja tidak cukup?

Komponen tetap harus berada di dalam tree app/layout.tsx yang valid agar konteks router tersedia.

Kapan perlu cek versi Next.js dan struktur layout?

Cek bila error muncul setelah upgrade, migrasi Pages ke App Router, atau root layout diubah.

Artikel Terkait