Navigasi Gagal? Cara Mengatasi Next Router Not Mounted di App Router

Ditulis oleh Next.js

Pesan Next router not mounted di App Router hampir selalu berarti useRouter() dari next/navigation dipanggil di tempat yang belum punya konteks router. Perbaiki lokasi pemanggilannya, pastikan komponen berjalan sebagai Client Component, lalu panggil router.push() setelah mount selesai.

Penyebab Next Router Not Mounted di App Router

App Router dan Pages Router memakai hook berbeda. App Router memakai useRouter dari next/navigation, sedangkan Pages Router memakai next/router. Import yang tertukar membuat konteks tidak terbaca.

Kasus paling sering:

  • Hook dipakai di Server Component tanpa use client.
  • Komponen dirender di luar layout tempat provider router aktif.
  • Router dipanggil saat render pertama, sebelum mount selesai, terutama pada Strict Mode.
  • Navigasi dijalankan di dalam kondisi yang membuat provider ter-unmount lalu mount ulang.

Tabel Diagnosis Cepat Next Router Not Mounted

Periksa baris pertama stack trace. Baris itu menunjukkan file yang memanggil useRouter, bukan file tempat error ditampilkan. Cocokkan dengan tabel ini.

Masalah Pemicu Pemeriksaan
router null Komponen masih server Cek baris use client
push/replace gagal Import next/router Ganti ke next/navigation
Error hanya di client Dipanggil sebelum mount Pindah ke event atau efek
Error hilang-timbul Conditional render provider Periksa layout dan early return
  • Navigasi push atau replace tidak jalan dan halaman diam.
  • Nilai router terbaca null saat di-log dari komponen.
  • Error hanya muncul di browser, log server terlihat normal.

BACA JUGA:

Cara Perbaiki Navigasi dan Cek Router Siap

  1. Pindahkan useRouter ke Client Component yang benar-benar menangani klik atau form.
  2. Perbaiki import menjadi next/navigation. Jangan mencampurnya dengan API Pages Router.
  3. Jangan panggil router.push() langsung di badan komponen. Tunggu interaksi pengguna atau useEffect.
  4. Perbaiki layout yang me-render konten secara kondisional sebelum provider siap.
"use client";
import { useRouter, usePathname } from "next/navigation";

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

  function pindah() {
    if (pathname === "/dashboard") return;
    router.push("/dashboard");
  }

  return <button onClick={pindah}>Ke Dashboard</button>;
}
  • Jalankan build lokal dan buka halaman yang sebelumnya error.
  • Uji route dinamis seperti /produk/[id] dan pastikan parameter terbaca.
  • Uji search params dan tombol kembali browser setelah navigasi.

FAQ

Apakah useRouter Pages Router bisa dipakai di App Router?

Tidak. App Router wajib memakai next/navigation karena konteks routernya berbeda.

Kapan router boleh dipanggil setelah komponen mount?

Panggil di event handler atau useEffect, bukan langsung saat render.

Kenapa error hanya muncul di production?

Perbedaan Strict Mode, urutan mount, dan optimasi production membuat pemanggilan terlalu awal lebih mudah gagal.

Artikel Terkait