Kapan Pakai Redirect() dan Kapan useRouter? Cara Redirect di App Router Next Js

Ditulis oleh Next.js

Gunakan redirect() dari next/navigation kalau kode berjalan di server, dan gunakan useRouter().push() kalau kode berjalan di browser. Salah pilih lapisan ini penyebab redirect di App Router paling sering gagal. middleware dan Route Handler memakai NextResponse.redirect().

Pilih Metode Redirect Sesuai Tempat Kode Berjalan

App Router memisahkan kode server dan client secara ketat. API navigasi mengikuti lokasi eksekusi, bukan lokasi file.

  • Server Component butuh cek session lalu lempar ke login: pakai redirect().
  • Server Action setelah login atau submit form berhasil: pakai redirect() di akhir fungsi.
  • Client Component setelah klik tombol atau state berubah: pakai useRouter().
  • Middleware dan Route Handler sebelum response dibuat: pakai NextResponse.redirect().
Lokasi API Catatan
Server Component redirect() Panggil sebelum JSX dikembalikan
Server Action redirect() Jangan bungkus try catch
Client Component useRouter() Butuh use client
Middleware NextResponse.redirect() Butuh URL absolut

Langkah Redirect di Server Component dan Server Action

redirect() menghentikan render dengan melempar error khusus Next.js. Panggil secara kondisional, bukan setelah render selesai.

  1. Import redirect dan permanentRedirect dari next/navigation.
  2. Panggil sebelum render saat kondisi terpenuhi, misalnya user belum login.
  3. Pakai revalidatePath() di Server Action bila data halaman tujuan harus segar setelah redirect.
import { redirect, permanentRedirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await getSession();
  if (!session) redirect('/login');
  return <p>Dashboard</p>;
}

export function OldDocsPage() {
  permanentRedirect('/docs/baru');
}

'use server';
import { redirect } from 'next/navigation';

export async function loginAction(formData: FormData) {
  const ok = await checkCredentials(formData);
  if (!ok) return { error: 'Email atau kata sandi salah' };
  redirect('/dashboard');
}

BACA JUGA:

Langkah Redirect di Client Component dan Middleware

Navigasi client tidak melempar error. Ia berpindah halaman tanpa reload penuh dan bisa memilih menambah atau mengganti riwayat browser.

  1. Tandai file dengan use client di baris pertama.
  2. Ambil router lewat useRouter(), lalu pakai push(), replace(), atau refresh().
  3. Untuk proteksi global seperti auth, tulis aturan di middleware.ts dengan matcher.
'use client';
import { useRouter } from 'next/navigation';

export default function BayarButton() {
  const router = useRouter();
  async function bayar() {
    await prosesPembayaran();
    router.replace('/checkout/sukses');
  }
  return <button onClick={bayar}>Bayar</button>;
}

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*'],
};
  • Jangan menaruh redirect() server di dalam try catch karena catch menelan sinyal redirect.
  • Jangan memanggil redirect setelah response Route Handler dikirim karena header sudah terkunci.
  • Jangan memakai useRouter di Server Component karena hook hanya hidup di client.

FAQ

Kapan memakai redirect() dan useRouter().push?

Pakai redirect() untuk keputusan di server sebelum halaman dirender, pakai push() untuk aksi di browser seperti setelah klik.

Kenapa redirect di App Router tidak jalan?

Penyebab umum adalah redirect() dipanggil di Client Component, tertelan try catch, atau dipanggil setelah render dan response selesai.

Apakah middleware bisa membaca search params saat redirect?

Bisa, baca lewat request.nextUrl.searchParams lalu teruskan ke URL tujuan bila parameter itu perlu dipertahankan.

Artikel Terkait