Navigasi Client Component dengan Cara Menggunakan useRouter Next Navigation

Ditulis oleh Next.js

Cara menggunakan useRouter next navigation yang benar adalah menandai file dengan use client, mengimpor dari next/navigation, lalu memanggil router.push() atau router.replace() di dalam event handler. Hook ini hanya berjalan di Client Component App Router, bukan di Server Component.

"use client";
import { useRouter } from "next/navigation";

export default function TombolPindah() {
  const router = useRouter();
  return (
    <button onClick={() => router.push("/dashboard")}>
      Ke Dashboard
    </button>
  );
}

Syarat useRouter next/navigation Berjalan di Client Component

useRouter termasuk hook client-only. React membutuhkannya berjalan di browser setelah hydration selesai.

  • Impor selalu dari next/navigation untuk App Router, bukan next/router.
  • File wajib diawali “use client” karena hook memakai state dan browser history.
  • Panggil router di dalam event, effect, atau callback client, jangan saat render Server Component.
  • Jangan tertukar dengan Pages Router yang memakai pola router.query dan router.pathname berbeda.

Langkah Cara Menggunakan useRouter Next Navigation

  1. Tandai file dengan “use client” pada baris pertama.
  2. Impor hooknya: import { useRouter } from “next/navigation”.
  3. Buat instance dengan const router = useRouter() di dalam komponen.
  4. Panggil router.push(“/tujuan”), router.replace(“/login”), router.back(), router.forward(), atau router.refresh().
  5. Gabungkan dengan usePathname() untuk path aktif dan useSearchParams() untuk query bila perlu.
"use client";
import { useRouter, usePathname } from "next/navigation";

export default function Navigasi() {
  const router = useRouter();
  const pathname = usePathname();
  if (pathname === "/login") return null;
  return <button onClick={() => router.replace("/login")}>Keluar</button>;
}

BACA JUGA:

Perbandingan push, replace, refresh, dan prefetch

Gunakan push untuk navigasi biasa yang bisa kembali dengan tombol back. Gunakan replace untuk login, logout, redirect setelah form, atau halaman yang tidak perlu masuk riwayat browser.

Gunakan refresh setelah mutasi data agar Server Component mengambil ulang data terbaru tanpa pindah halaman. Untuk prefetch, App Router melakukan prefetch otomatis pada Link; hindari prefetch manual berlebihan untuk route dinamis karena bisa memicu banyak request.

Tabel Error Umum useRouter

Masalah Penyebab Solusi
Hook dipakai di Server Component File tanpa use client Pindahkan navigasi ke Client Component anak
Impor dari next/router API Pages Router di App Router Ganti ke next/navigation
Router tidak merespons Dipanggil saat render server Panggil di onClick atau useEffect

FAQ

Apakah useRouter bisa dipakai di Server Component? Tidak, hanya di Client Component.

Tidak. Server Component tidak mendukung hook, pindahkan logika klik ke komponen client.

Apa beda next/router dan next/navigation? next/router untuk Pages Router, next/navigation untuk App Router.

Gunakan next/navigation untuk App Router karena API-nya berbeda dan terpisah.

Kapan memakai redirect() dibanding useRouter? redirect() untuk server, useRouter untuk interaksi client.

Pakai redirect() di Server Component, Server Action, atau Route Handler, dan useRouter untuk klik atau kondisi di browser.

Artikel Terkait