Butuh Pindah Halaman di App Router? Cara Redirect ke Halaman Lain Next Js

Ditulis oleh Next.js

Untuk cara redirect ke halaman lain Next Js di App Router, pakai redirect() di server dan useRouter().push() atau replace() di client. Kesalahan paling umum adalah memanggil redirect() di dalam onClick atau komponen bertanda “use client”. Kode itu berjalan di browser, sedangkan redirect() hanya valid di Server Component, Server Action, atau Route Handler.

Pilih Metode Redirect Sesuai Lokasi Kode

App Router memisahkan navigasi server dan client. Pilih API berdasarkan tempat kode dieksekusi, bukan berdasarkan tujuan halaman.

Lokasi API Catatan
Server Component redirect() Dari next/navigation
Client Component useRouter().push/replace Butuh “use client”
Server Action redirect() Setelah validasi server
Middleware NextResponse.redirect() Untuk proteksi route
  • Setelah login: redirect server setelah session dan cookie dibuat.
  • Submit form: validasi di Server Action, lalu redirect ke halaman hasil.
  • Proteksi route: cek session di Middleware atau layout server.
  • Navigasi tombol: pakai useRouter().push di Client Component.

Langkah Redirect di Server Component App Router

Panggil redirect() sebelum JSX dikembalikan. Fungsi ini menghentikan render dan mengirim respons navigasi.

  1. Import redirect dari next/navigation.
  2. Ambil data atau session yang menentukan tujuan.
  3. Panggil redirect(“/dashboard”) bila kondisi terpenuhi.
import { redirect } from "next/navigation";

export default async function Page() {
  const user = await getUser();
  if (!user) {
    redirect("/login");
  }
  return <h1>Dashboard</h1>;
}
  • redirect() tidak bisa dipakai di onClick.
  • redirect() tidak bisa dipakai di Client Component.
  • Jangan meletakkannya setelah return JSX.

BACA JUGA:

Langkah Redirect di Client Component dan Server Action

Untuk interaksi browser seperti klik tombol, gunakan router client. Untuk proses form di server, gunakan redirect server.

  1. Tambahkan “use client” di baris pertama file.
  2. Ambil router dengan useRouter dari next/navigation.
  3. Gunakan router.push(“/produk”) untuk navigasi biasa.
  4. Gunakan router.replace(“/login”) agar halaman lama tidak tersimpan di riwayat back.
"use client";
import { useRouter } from "next/navigation";

export default function TombolBeli() {
  const router = useRouter();
  return <button onClick={() => router.push("/checkout")}>Beli</button>;
}
  1. Terima FormData di Server Action.
  2. Validasi input di server sebelum menyimpan data.
  3. Panggil redirect() setelah operasi berhasil.
  • Tertukar push dan replace sehingga tombol back membawa pengguna ke halaman yang seharusnya ditinggalkan.
  • Memanggil redirect di useEffect tanpa kondisi sehingga terjadi loop navigasi.
  • Memakai router dari next/router karena itu API Pages Router.

FAQ

Apakah redirect() bisa dipakai di Client Component?

Tidak. Gunakan useRouter().push atau replace di Client Component.

Kapan memakai push dan kapan memakai replace?

Pakai push untuk navigasi biasa, pakai replace setelah login atau logout agar halaman sebelumnya tidak bisa dibuka dengan tombol back.

Artikel Terkait